CSS-kiezers worden gebruikt in het doelelement, verbergen het element en wachten tot elementfuncties een of meer HTML-elementen identificeren. De twee belangrijkste typen CSS-selectors zijn selecteren op id of klasse. Een HTML-element heeft een id als het het id-attribuut bevat, zoals hieronder weergegeven.
<span id="myidentifier">Example Text</span>
Om het te selecteren, maakt u een CSS-selector zoals #myidentifier
Als een HTML-element een klasse heeft, heeft het het class-attribuut, zoals weergegeven in dit voorbeeld.
<div> <span class="myclass">Example Text One</span> <span class="myclass">Example Text Two</span> <span class="myclass">Example Text Three</span> </div>
Om het te selecteren, maakt u een CSS-selector zoals .myclass
Als u een bepaald element met de klasse van wilt selecteren myclass
U kunt hiervoor standaard CSS-kiezers gebruiken, in dit geval de zoveelste kind(2) selectie als volgt: .myclass:nth-child(2)
om de tweede myclass-reeks te selecteren. Dit werkt echter alleen in dit geval omdat er geen andere elementen onder het bovenliggende div-element staan. Als er bijvoorbeeld een ap-element zou zijn, zou dit de n-de-kindindex veranderen.
Soms heeft een HTML-element dat u moet selecteren geen ID of klasse die uniek is binnen een pagina. Bij het selecteren van deze HTML-elementen is een ingewikkeldere CSS-selector vereist.
<div class="Header"> <a href="https://www.example.com/"> <div>...</div> </a> <div class="SearchBar">...</div> <div class="TagLine">...</div> </div>
In het bovenstaande voorbeeld willen we bijvoorbeeld het DIV-element binnen de link selecteren. Om dit te doen, moeten we een CSS-selector specificeren die werkt vanaf de unieke DIV met de Header
klasse.
div.Header a div
CSS-selectors zijn een standaardfunctie van webontwikkeling. Dit artikel geeft een goed overzicht van Hoe CSS-kiezers te gebruiken.
Als er meerdere HTML-elementen worden geretourneerd door een CSS-selector en u het doelelement gebruikt of wacht op elementfuncties, wordt alleen het eerste overeenkomende element gebruikt. Als u echter de functie voor het verbergen van elementen gebruikt, worden alle overeenkomende HTML-elementen verborgen.
Als u meerdere elementen met verschillende ID's of klassen wilt verbergen, kunt u dit doen door elke CSS-selector te scheiden met een komma. Dus om bijvoorbeeld de voorbeeldklasse en id hierboven te verbergen, zou je het volgende gebruiken #myidentifier,.myclass