Alle almindelige CSS-selektorer, grupperet efter familie: grundlæggende, kombinatorer, pseudoklasser, pseudoelementer og attributselektorer. Hver række parrer selektoren med et eksempel på én linje.
En selektor vælger de elementer, en regel gælder for. Specificiteten afgør, hvilken regel der vinder, når flere matcher: inline slår id, id slår klasse, klasse slår type. Læs selektorer fra højre mod venstre: browseren matcher først delen længst til højre og går derefter op gennem kombinatorerne. Familierne nedenfor dækker næsten alt, hvad du vil skrive.
Referencetabel · 53 poster
CSS-selektorerExplained
53 of 53 rows
Grundlæggende
Hvert element med det tag.
button { }
Elementer med den klasse.
.active { }
Det ene element med det id.
#header { }
Alle elementer.
* { box-sizing: border-box; }
Dokumentroden; det sædvanlige sted for globale custom properties.
:root { --gap: 1rem; }
Elementer, der matcher A eller B (gruppering).
h1, h2, h3 { }
Kombinatorer
Enhver B, der er efterkommer af A.
nav a { }
B, der er et direkte barn af A.
ul > li { }
B umiddelbart efter A, samme forælder.
h1 + p { }
Enhver B, der følger efter A, samme forælder.
h1 ~ p { }
Pseudoklasser (tilstand)
Elementet, mens markøren er over det.
a:hover { }
Elementet, der har tastaturfokus.
input:focus { }
Et element, der er det første barn af sin forælder.
li:first-child { }
Det n'te barn; tager formler som 2n.
tr:nth-child(2n) { }
Elementer, der ikke matcher nogen indre selektor; tager en liste siden Selectors 4.
li:not(:first-child, .skip) { }
En afkrydsningsboks, radioknap eller option, der er valgt.
input:checked { }
Et deaktiveret inputfelt eller en deaktiveret knap.
button:disabled { }
En forælder, der indeholder et match for den indre selektor.
li:has(ul) { }
Enhver selektor på listen; specificiteten er den højeste på listen.
:is(ol, ul) li { }
Samme som :is(), men med nul specificitet.
:where(ol, ul) li { }
Fokus, der skal vise en ring, normalt fra tastaturet.
a:focus-visible { }
Et element, hvor det selv eller en efterkommer har fokus.
form:focus-within { }
Et element, der er det sidste barn af sin forælder.
li:last-child { }
Et element uden søskende.
p:only-child { }
Det n'te søskende med samme tag; tager formler som 2n.
p:nth-of-type(2n) { }
Det første eller sidste søskende med samme tag.
p:first-of-type { }
Et element uden børn og uden tekst.
td:empty { }
Ikke-besøgte links og allerede besøgte links.
a:visited { }
Felter markeret som påkrævede og felter ladet som valgfrie.
input:required { }
Felter, hvis værdi består eller fejler deres valideringsregler.
input:invalid { }
Et felt, som brugeren ikke kan redigere.
input:read-only { }
Elementet, hvis id matcher URL-fragmentet.
#note:target { }
Den forudvalgte option eller standardknap i en gruppe.
input:default { }
En afkrydsningsboks, som et script har sat i en ubestemt tilstand.
input:indeterminate { }
Ethvert indbygget element, eller et custom element, når det er registreret.
my-widget:defined { }
Et element på det givne sprog.
p:lang(fr) { }
Pseudoelementer
En genereret indholdsknude før elementet.
label::before { content: ""; }
En genereret indholdsknude efter elementet.
code::after { content: ";"; }
Det første bogstav i en tekstblok.
p::first-letter { }
Pladsholderteksten i et inputfelt.
input::placeholder { }
Den første linje i en tekstblok.
p::first-line { }
Den tekst, brugeren har markeret.
::selection { }
Prikken eller tallet på et listeelement.
li::marker { }
Området bag et fuldskærmselement eller en dialog.
dialog::backdrop { }
Gennemse-knappen inde i et filfelt.
input::file-selector-button { }
En shadow DOM-part, som værten har eksponeret.
my-widget::part(header) { }
Attributselektorer
Elementer, der har attributten, uanset værdi.
[required] { }
Attributten er præcis lig med val.
[type="submit"] { }
Attributten begynder med val.
a[href^="https"] { }
Attributten slutter med val.
a[href$=".pdf"] { }
Attributten indeholder val.
a[href*="login"] { }
En mellemrumssepareret liste, der omfatter val.
[class~="badge"] { }
Værdien er lig med val eller begynder med val efterfulgt af en bindestreg.