CSS Selectormanual

CSS-selectors

CSS-selectors worden gebruikt om "vinden" (of kiezen) de HTML-elementen die u wilt stylen.

Gebruik onze CSS-selector tester om verschillende selectors te demonstreren.

CSS-eenvoudige selectors

Eenvoudige selectors kiezen elementen op basis van elementnaam, id en klasse. Daarnaast zijn er ook algemene selectors (*)

Selector Voorbeeld Voorbeeldbeschrijving
element p Selecteer alle <p> elementen.
#id #firstname Selecteer het element met id="firstname".
* * Selecteer alle elementen.
.class .intro Selecteer alle elementen met class="intro".

CSS-attribute selector

Attribute selectors selecteren HTML-elementen met een gegeven set eigenschappen.

Selector Voorbeeld Voorbeeldbeschrijving
[attribute] [target] Selecteer alle elementen met de eigenschap target.
[attribute=value] [target=_blank] Selecteer alle elementen met de eigenschap target="_blank".
[attribute~=value] [title~=flower] Selecteer alle elementen waar de title-eigenschap de woorden "flower" bevat.
[attribute|=value] [lang|=en] Selecteer alle elementen waar de waarde van de lang-eigenschap begint met "en".
[attribute^=value] a[href^="https"] Selecteer elke <a> element die begint met "https" in de waarde van de href-eigenschap.
[attribute$=value] a[href$=".pdf"] Selecteer alle <a> elementen waar de waarde van de src-eigenschap eindigt op ".pdf".
[attribute*=value] a[href*="codew3c"] Selecteer elke <a> element die de subtekenreeks "abc" bevat in de waarde van de href-eigenschap.

CSS geneste selectie

Selector Voorbeeld Voorbeeldbeschrijving
& & Stijl toepassen op een element in de context van een ander element