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.
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
