CSS-selectors worden gebruikt in het doelelement, verberg element en wacht tot elementkenmerken een of meer HTML-elementen identificeren. De twee hoofdtypen CSS-selectors zijn om op ID of klasse te selecteren. Een HTML-element heeft een id als het het id-kenmerk bevat, zoals hieronder wordt 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 klasse-attribuut zoals in dit voorbeeld wordt getoond.
<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 wilde selecteren myclass u kunt hiervoor standaard CSS-selectors gebruiken in dit geval de n-kind (2) selector zo: .myclass:nth-child(2) om de tweede myclass-reeks te selecteren. Dit zal echter alleen in dit geval werken omdat er geen andere elementen onder het bovenliggende div-element zijn. Als er bijvoorbeeld een ap-element zou zijn, zou dit de nth-child index wijzigen.
Selecteer een HTML-element zonder een unieke ID of klasse
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 meer gecompliceerde 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-selectors te gebruiken.
Omgaan met meerdere overeenkomende elementen
Als er meerdere HTML-elementen worden geretourneerd vanuit een CSS-selector en u het doelelement gebruikt of wacht op elementkenmerken, wordt alleen het eerste overeenkomende element gebruikt. Als u echter de functie element verbergen gebruikt, zijn 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
