Toți selectorii CSS uzuuali, grupați pe familii: de bază, combinatori, pseudo-clase, pseudo-elemente și selectori de atribut. Fiecare rând asociază selectorul cu un exemplu dintr-o linie.
Un selector alege elementele cărora li se aplică o regulă. Specificitatea decide ce regulă câștigă când mai multe se potrivesc: inline bate id, id bate clasă, clasă bate tip. Citește selectorii de la dreapta la stânga: browserul potrivește mai întâi partea cea mai din dreapta, apoi urcă prin combinatori. Familiile de mai jos acoperă aproape tot ce vei scrie.
Tabel de referință · 53 intrări
Selectori CSSExplained
53 of 53 rows
De bază
Fiecare element cu acea etichetă.
button { }
Elementele cu acea clasă.
.active { }
Singurul element cu acel id.
#header { }
Toate elementele.
* { box-sizing: border-box; }
Rădăcina documentului; locul obișnuit pentru proprietățile personalizate globale.
:root { --gap: 1rem; }
Elementele potrivite de A sau B (grupare).
h1, h2, h3 { }
Combinatori
Orice B descendent al lui A.
nav a { }
B care este copil direct al lui A.
ul > li { }
B imediat după A, același părinte.
h1 + p { }
Fiecare B care urmează după A, același părinte.
h1 ~ p { }
Pseudo-clase (stare)
Elementul cât timp pointerul este peste el.
a:hover { }
Elementul care are focusul de la tastatură.
input:focus { }
Un element care este primul copil al părintelui său.
li:first-child { }
Al n-lea copil; acceptă formule precum 2n.
tr:nth-child(2n) { }
Elementele care nu se potrivesc cu niciun selector interior; acceptă o listă din Selectors 4.
li:not(:first-child, .skip) { }
O bifă, un buton radio sau o opțiune bifată.
input:checked { }
Un câmp sau un buton dezactivat.
button:disabled { }
Un părinte care conține o potrivire pentru selectorul interior.
li:has(ul) { }
Orice selector din listă; specificitatea este cea mai mare din listă.
:is(ol, ul) li { }
La fel ca :is(), dar cu specificitate zero.
:where(ol, ul) li { }
Focusul care trebuie să afișeze un inel, de obicei de la tastatură.
a:focus-visible { }
Un element care el însuși sau un descendent al său are focusul.
form:focus-within { }
Un element care este ultimul copil al părintelui său.
li:last-child { }
Un element fără frați.
p:only-child { }
Al n-lea frate cu aceeași etichetă; acceptă formule precum 2n.
p:nth-of-type(2n) { }
Primul sau ultimul frate cu aceeași etichetă.
p:first-of-type { }
Un element fără copii și fără text.
td:empty { }
Linkurile nevizitate și linkurile deja vizitate.
a:visited { }
Câmpurile marcate ca obligatorii și câmpurile lăsate opționale.
input:required { }
Câmpurile a căror valoare trece sau nu trece regulile de validare.
input:invalid { }
Un câmp pe care utilizatorul nu îl poate edita.
input:read-only { }
Elementul al cărui id se potrivește cu fragmentul URL-ului.
#note:target { }
Opțiunea preselectată sau butonul implicit al unui grup.
input:default { }
O bifă pusă într-o stare nedeterminată de un script.
input:indeterminate { }
Orice element integrat sau un element personalizat după înregistrare.
my-widget:defined { }
Un element în limba dată.
p:lang(fr) { }
Pseudo-elemente
Un nod de conținut generat înaintea elementului.
label::before { content: ""; }
Un nod de conținut generat după element.
code::after { content: ";"; }
Prima literă a unui bloc de text.
p::first-letter { }
Textul indicativ al unui câmp.
input::placeholder { }
Prima linie a unui bloc de text.
p::first-line { }
Textul pe care utilizatorul l-a evidențiat.
::selection { }
Bulina sau numărul unui element de listă.
li::marker { }
Zona din spatele unui element pe tot ecranul sau al unui dialog.
dialog::backdrop { }
Butonul de răsfoire din interiorul unui câmp de fișier.
input::file-selector-button { }
O parte din shadow DOM expusă de gazdă.
my-widget::part(header) { }
Selectori de atribut
Elementele care au atributul, cu orice valoare.
[required] { }
Atributul este exact egal cu val.
[type="submit"] { }
Atributul începe cu val.
a[href^="https"] { }
Atributul se termină cu val.
a[href$=".pdf"] { }
Atributul conține val.
a[href*="login"] { }
O listă separată prin spații care include val.
[class~="badge"] { }
Valoarea este egală cu val sau începe cu val urmat de cratimă.