Tutti i selettori CSS comuni, raggruppati per famiglia: base, combinatori, pseudo-classi, pseudo-elementi e selettori di attributo. Ogni riga abbina il selettore a un esempio di una riga.
Un selettore sceglie gli elementi a cui si applica una regola. La specificità decide quale regola vince quando ne corrispondono diverse: inline batte id, id batte classe, classe batte tipo. Leggi i selettori da destra a sinistra: il browser confronta prima la parte più a destra, poi risale i combinatori. Le famiglie qui sotto coprono quasi tutto ciò che scriverai.
Tabella di riferimento · 53 voci
Selettori CSSExplained
53 of 53 rows
Base
Tutti gli elementi con quel tag.
button { }
Gli elementi con quella classe.
.active { }
L'unico elemento con quell'id.
#header { }
Tutti gli elementi.
* { box-sizing: border-box; }
La radice del documento; il posto abituale per le custom property globali.
:root { --gap: 1rem; }
Gli elementi selezionati da A o B (raggruppamento).
h1, h2, h3 { }
Combinatori
Qualsiasi B discendente di A.
nav a { }
B figlio diretto di A.
ul > li { }
B immediatamente dopo A, con lo stesso genitore.
h1 + p { }
Ogni B che segue A, con lo stesso genitore.
h1 ~ p { }
Pseudo-classi (stato)
L'elemento mentre il puntatore è sopra di esso.
a:hover { }
L'elemento che ha il focus da tastiera.
input:focus { }
Un elemento che è il primo figlio del suo genitore.
li:first-child { }
L'n-esimo figlio; accetta formule come 2n.
tr:nth-child(2n) { }
Gli elementi che non corrispondono ad alcun selettore interno; accetta una lista da Selectors 4.
li:not(:first-child, .skip) { }
Una casella di controllo, un radio o un'opzione selezionati.
input:checked { }
Un input o un pulsante disabilitato.
button:disabled { }
Un genitore che contiene una corrispondenza per il selettore interno.
li:has(ul) { }
Qualsiasi selettore della lista; la specificità è la più alta della lista.
:is(ol, ul) li { }
Come :is(), ma con specificità zero.
:where(ol, ul) li { }
Il focus che dovrebbe mostrare un anello, di solito da tastiera.
a:focus-visible { }
Un elemento che ha il focus, esso stesso o un suo discendente.
form:focus-within { }
Un elemento che è l'ultimo figlio del suo genitore.
li:last-child { }
Un elemento senza fratelli.
p:only-child { }
L'n-esimo fratello con lo stesso tag; accetta formule come 2n.
p:nth-of-type(2n) { }
Il primo o l'ultimo fratello con lo stesso tag.
p:first-of-type { }
Un elemento senza figli e senza testo.
td:empty { }
I link non ancora visitati e quelli già visitati.
a:visited { }
Gli input contrassegnati come obbligatori e quelli lasciati facoltativi.
input:required { }
Gli input il cui valore supera o meno le regole di validazione.
input:invalid { }
Un input che l'utente non può modificare.
input:read-only { }
L'elemento il cui id corrisponde al frammento dell'URL.
#note:target { }
L'opzione preselezionata o il pulsante predefinito di un gruppo.
input:default { }
Una casella di controllo messa in stato indeterminato da uno script.
input:indeterminate { }
Qualsiasi elemento incorporato, oppure un elemento personalizzato una volta registrato.
my-widget:defined { }
Un elemento nella lingua indicata.
p:lang(fr) { }
Pseudo-elementi
Un nodo di contenuto generato prima dell'elemento.
label::before { content: ""; }
Un nodo di contenuto generato dopo l'elemento.
code::after { content: ";"; }
La prima lettera di un blocco di testo.
p::first-letter { }
Il testo segnaposto di un input.
input::placeholder { }
La prima riga di un blocco di testo.
p::first-line { }
Il testo evidenziato dall'utente.
::selection { }
Il punto elenco o il numero di una voce di elenco.
li::marker { }
L'area dietro un elemento a schermo intero o un dialog.
dialog::backdrop { }
Il pulsante di sfoglia dentro un input file.
input::file-selector-button { }
Una parte del shadow DOM esposta dall'host.
my-widget::part(header) { }
Selettori di attributo
Gli elementi che hanno l'attributo, con qualsiasi valore.
[required] { }
L'attributo è esattamente uguale a val.
[type="submit"] { }
L'attributo inizia con val.
a[href^="https"] { }
L'attributo termina con val.
a[href$=".pdf"] { }
L'attributo contiene val.
a[href*="login"] { }
Una lista separata da spazi che include val.
[class~="badge"] { }
Il valore è uguale a val, oppure inizia con val seguito da un trattino.