Alle gangbare CSS-selectors, gegroepeerd op familie: basis, combinatoren, pseudo-klassen, pseudo-elementen en attribuutselectors. Elke regel koppelt de selector aan een voorbeeld van één regel.
Een selector kiest de elementen waarop een regel van toepassing is. Specificiteit bepaalt welke regel wint als er meerdere matchen: inline verslaat id, id verslaat class, class verslaat type. Lees selectors van rechts naar links: de browser matcht eerst het meest rechtse deel en loopt daarna de combinatoren af. De families hieronder dekken bijna alles wat je zult schrijven.
Referentietabel · 53 items
CSS-selectorsExplained
53 of 53 rows
Basis
Alle elementen met die tag.
button { }
Elementen met die class.
.active { }
Het ene element met dat id.
#header { }
Alle elementen.
* { box-sizing: border-box; }
De documentwortel; de gebruikelijke plek voor globale custom properties.
:root { --gap: 1rem; }
Elementen die gematcht worden door A of B (groeperen).
h1, h2, h3 { }
Combinatoren
Elke B die afstamt van A.
nav a { }
B die een direct kind is van A.
ul > li { }
B direct na A, dezelfde ouder.
h1 + p { }
Elke B die na A komt, dezelfde ouder.
h1 ~ p { }
Pseudo-klassen (status)
Het element zolang de aanwijzer erop staat.
a:hover { }
Het element dat toetsenbordfocus heeft.
input:focus { }
Een element dat het eerste kind van zijn ouder is.
li:first-child { }
Het n-de kind; accepteert formules zoals 2n.
tr:nth-child(2n) { }
Elementen die niet matchen met een van de binnenste selectors; accepteert een lijst sinds Selectors 4.
li:not(:first-child, .skip) { }
Een aangevinkte checkbox, radioknop of optie.
input:checked { }
Een uitgeschakeld invoerveld of knop.
button:disabled { }
Een ouder die een match bevat voor de binnenste selector.
li:has(ul) { }
Elke selector in de lijst; de specificiteit is de hoogste uit de lijst.
:is(ol, ul) li { }
Hetzelfde als :is(), maar met specificiteit nul.
:where(ol, ul) li { }
Focus die een ring zou moeten tonen, meestal vanaf het toetsenbord.
a:focus-visible { }
Een element dat zelf of waarvan een afstammeling focus heeft.
form:focus-within { }
Een element dat het laatste kind van zijn ouder is.
li:last-child { }
Een element zonder broers en zussen.
p:only-child { }
Het n-de broer of zus met dezelfde tag; accepteert formules zoals 2n.
p:nth-of-type(2n) { }
De eerste of laatste broer of zus met dezelfde tag.
p:first-of-type { }
Een element zonder kinderen en zonder tekst.
td:empty { }
Niet-bezochte links en al bezochte links.
a:visited { }
Velden gemarkeerd als verplicht en velden die optioneel blijven.
input:required { }
Velden waarvan de waarde wel of niet aan de validatieregels voldoet.
input:invalid { }
Een invoerveld dat de gebruiker niet kan bewerken.
input:read-only { }
Het element waarvan het id overeenkomt met het URL-fragment.
#note:target { }
De vooraf geselecteerde optie of standaardknop van een groep.
input:default { }
Een checkbox die door een script in een onbepaalde staat is gezet.
input:indeterminate { }
Elk ingebouwd element, of een custom element zodra het is geregistreerd.
my-widget:defined { }
Een element in de opgegeven taal.
p:lang(fr) { }
Pseudo-elementen
Een gegenereerde contentnode vóór het element.
label::before { content: ""; }
Een gegenereerde contentnode na het element.
code::after { content: ";"; }
De eerste letter van een tekstblok.
p::first-letter { }
De placeholdertekst van een invoerveld.
input::placeholder { }
De eerste regel van een tekstblok.
p::first-line { }
De tekst die de gebruiker heeft geselecteerd.
::selection { }
Het opsommingsteken of nummer van een lijstitem.
li::marker { }
Het gebied achter een element of dialoog in volledig scherm.
dialog::backdrop { }
De bladerknop binnen een bestandsinvoerveld.
input::file-selector-button { }
Een shadow-DOM-onderdeel dat de host heeft blootgesteld.
my-widget::part(header) { }
Attribuutselectors
Elementen die het attribuut hebben, met elke waarde.
[required] { }
Het attribuut is exact gelijk aan val.
[type="submit"] { }
Het attribuut begint met val.
a[href^="https"] { }
Het attribuut eindigt op val.
a[href$=".pdf"] { }
Het attribuut bevat val.
a[href*="login"] { }
Een door spaties gescheiden lijst die val bevat.
[class~="badge"] { }
De waarde is gelijk aan val of begint met val plus een koppelteken.