Scrivi un qualsiasi selettore CSS e scopri quali elementi seleziona in una pagina di esempio, con la sua specificità. Include tutti i gruppi di selettori, un calcolatore per le formule nth-child, ricette per ::before e ::after e :has().
I selettori indicano al CSS a quali elementi si applica una regola. Quelli fondamentali sono tipo (p), classe (.card), ID (#main), attributo ([type=email]), combinatori (discendente con lo spazio, figlio >, fratello + e ~), pseudo-classi come :hover e :nth-child(2n) e pseudo-elementi come ::before. Scrivi un selettore qui sotto per vedere cosa seleziona.
I selettori alla base della maggior parte dei fogli di stile
Selettore
Seleziona
Specificità
Ogni elemento p
.card
Elementi con classe card
L'elemento con id main
nav a
a ovunque dentro nav
ul > li
li figli diretti di ul
a:hover
Un link sotto il puntatore
Leggere una tabella di selettori aiuta solo fino a un certo punto. Il tester qui sotto passa il tuo selettore al motore del browser stesso su una piccola pagina di esempio, evidenzia ogni elemento selezionato, spiega gli input non validi e calcola la specificità. Il calcolatore sottostante risponde all'eterna domanda su quali elementi selezioni davvero 3n+1.
Scrivi un selettore nel tester, oppure clicca su uno degli esempi per caricarlo.
Gli elementi corrispondenti nella pagina di esempio si illuminano e il conteggio si aggiorna mentre scrivi.
Leggi il punteggio di specificità come tre numeri: ID, poi classi e simili, poi tipi di elemento.
Usa il calcolatore nth-child per provare qualsiasi formula An+B su un elenco fino a 30 elementi.
Applica gli stili con le classi invece che con gli ID. Una classe mantiene bassa la specificità, così le regole successive e le classi utility possono ancora sovrascriverla.
Usa :focus-visible invece di :focus per gli anelli di focus. Mostra l'anello a chi usa la tastiera senza farlo lampeggiare a ogni clic del mouse.
::before e ::after richiedono una proprietà content, anche una stringa vuota, altrimenti non vengono generati affatto.
Racchiudi gli elenchi di selettori lunghi in :is() per accorciarli, o in :where() quando vuoi che abbiano specificità zero.
Domande frequenti
Qual è la differenza tra nth-child e nth-of-type?
:nth-child(2) conta ogni elemento fratello, poi verifica che il secondo corrisponda anche al resto del selettore. :nth-of-type(2) conta solo i fratelli con lo stesso tag. Quindi p:nth-child(2) non seleziona nulla se il secondo figlio è un h2, mentre p:nth-of-type(2) trova comunque il secondo paragrafo.
Qual è la differenza tra ::before e :before?
Sono lo stesso pseudo-elemento. Il doppio due punti è stato introdotto per distinguere gli pseudo-elementi dalle pseudo-classi, e per retrocompatibilità i browser accettano ancora il singolo due punti per i quattro più vecchi (before, after, first-line, first-letter). Nel codice nuovo scrivi il doppio due punti.
Cosa fa :has()?
:has() seleziona un elemento in base a ciò che contiene o a ciò che lo segue: per esempio .card:has(img) applica stili alle card che contengono un'immagine, e label:has(+ input:invalid) a un'etichetta che precede un campo non valido. È supportato in tutti i principali browser attuali; Firefox è stato l'ultimo ad aggiungerlo, alla fine del 2023.
Come si calcola la specificità?
Conta tre cose: i selettori ID; le classi, i selettori di attributo e le pseudo-classi; poi i selettori di tipo e gli pseudo-elementi. Confronta partendo da sinistra, quindi un ID batte qualsiasi numero di classi. :where() non aggiunge nulla, mentre :is(), :not() e :has() prendono il punteggio del loro argomento più specifico. Gli stili inline e !important stanno sopra tutto questo.
Perché il mio stile :hover non si vede sui telefoni?
Gli schermi touch non hanno uno stato hover, quindi i browser lo saltano o lo applicano brevemente dopo un tocco. Racchiudi gli stili solo hover in @media (hover: hover) e assicurati che tutto ciò che appare all'hover sia raggiungibile anche con un tocco e con la tastiera.
Come il browser legge un selettore
I browser abbinano i selettori da destra a sinistra. Per nav ul li a il motore parte da ogni link della pagina, poi risale per cercare un li, un ul e un nav. Ecco perché la parte più a destra, chiamata key selector, è la più importante per la velocità, anche se nelle pagine normali la velocità dei selettori è raramente un problema reale.
Una virgola crea un elenco di selettori, cioè semplicemente più selettori che condividono una regola. Se anche uno solo non è valido, l'intera regola viene scartata, tranne dentro :is() e :where(), che tollerano le voci non valide.
Pseudo-classi e pseudo-elementi
Una pseudo-classe, scritta con un solo due punti, seleziona un elemento esistente in un certo stato o posizione: :hover, :checked, :first-child, :empty. Uno pseudo-elemento, scritto con due volte i due punti, crea o seleziona una parte che non è un elemento a sé nell'HTML: ::before, ::placeholder, ::selection, ::marker.
È consentito un solo pseudo-elemento per selettore composto, e deve stare alla fine. Il contenuto aggiunto con ::before e ::after di solito viene letto ad alta voce dagli screen reader ma non si può selezionare né copiare, quindi non metterci informazioni essenziali.
Tenere sotto controllo la specificità
La maggior parte delle guerre di specificità comincia quando un ID o una lunga catena di selettori annidati vince su una regola successiva e più semplice. Nomi di classe piatti, al massimo uno o due livelli di profondità, rendono ogni regola facile da sovrascrivere.
I cascade layer (@layer) offrono un altro strumento: le regole in un layer successivo battono quelle in un layer precedente indipendentemente dalla specificità. Reset e stili di terze parti possono stare in un layer basso così le tue classi vincono sempre.
Selettori di base e di attributo
Selettori semplici
Selettore
Esempio
Seleziona
Ogni elemento
Tipo
Tutti gli elementi button
Classe
.price
class contiene price
ID
id è checkout
Attributo presente
[disabled]
Ha l'attributo, con qualsiasi valore
Valore esatto
[type="email"]
Il valore è esattamente email
Inizia con
[href^="https"]
Il valore inizia con https
Finisce con
[href$=".pdf"]
Il valore finisce con .pdf
Contiene
[class*="btn"]
Il valore contiene btn in qualsiasi punto
Parola in un elenco
[rel~="noopener"]
L'elenco separato da spazi include la parola
Prefisso di lingua
[lang|="en"]
en oppure en- seguito da qualsiasi cosa
Senza distinzione tra maiuscole e minuscole
[href$=".PDF" i]
Seleziona .pdf, .PDF e così via
Combinatori
Relazioni tra elementi
Combinatore
Esempio
Seleziona
Discendente (spazio)
nav a
a a qualsiasi profondità dentro nav
Figlio >
ul > li
li direttamente dentro ul
Fratello successivo +
Il p subito dopo un h2
Fratelli successivi ~
Ogni p dopo un h2 con lo stesso genitore
Elenco di selettori ,
L'uno o l'altro
Pseudo-classi
Stato, struttura e logica
Pseudo-classe
Seleziona
:hover
Sotto il puntatore del mouse
:focus
Ha il focus da tastiera o via codice
:focus-visible
Ha il focus e il browser ritiene che debba apparire un anello
:focus-within
Lui stesso o un discendente ha il focus
:active
Mentre viene premuto
:visited
Un link già visitato (stili limitati per la privacy)
:checked / :disabled / :required
Controlli dei moduli in quello stato
:valid / :invalid / :user-invalid
Stati di validazione dei moduli; user-invalid attende un'interazione
:placeholder-shown
Un input che sta mostrando il suo placeholder
:first-child / :last-child / :only-child
Posizione tra i fratelli
:nth-child(An+B) / :nth-last-child()
Posizione secondo una formula, contando tutti i fratelli
:nth-of-type() / :first-of-type
Posizione contando solo lo stesso tag
:empty
Nessun figlio e nessun testo
:not(x)
Non corrisponde a x
:is(x, y) / :where(x, y)
Corrisponde a uno qualsiasi dell'elenco; where ha specificità zero
:has(x)
Contiene, o è seguito da, qualcosa che corrisponde a x
:root
L'elemento html
:target
L'elemento il cui id è nell'hash dell'URL
Pseudo-elementi e ricette per ::before / ::after
Parti di un elemento
Pseudo-elemento
Seleziona
::before / ::after
Contenuto generato prima o dopo il contenuto dell'elemento
::first-letter / ::first-line
Prima lettera o prima riga visualizzata di un blocco
::placeholder
Testo segnaposto in un input
::selection
Testo evidenziato dall'utente
::marker
Il punto elenco o il numero di una voce di elenco
::file-selector-button
Il pulsante di un input di tipo file
::backdrop
Il livello dietro un dialog modale o un elemento a schermo intero
Asterisco obbligatorio, icona di link esterno e virgolette
Ogni decorazione vive nel CSS, così l'HTML resta pulito. content è obbligatorio per entrambi gli pseudo-elementi.
:hover, :focus-visible e :has() insieme
Raggiungi il campo con Tab per vedere l'anello. La card diventa rossa solo finché contiene un'email non valida.
Home
Sito partner
Menu
Piatti di stagione, cambiati ogni settimana.
Chiedi informazioni sugli allergeni.
Zuppa
Insalata
Risotto
Crostata
Caffè
Nome
Nota
Tester di selettori
Selettore
Selettori di esempio
Questo non è un selettore valido in questo browser.
{n} elemento selezionato
{n} elementi selezionati
La specificità si legge ID, classi, tipi. Il terzo elemento, Risotto, ha la classe featured; il primo paragrafo ha id intro.
Calcolatore nth-child
Formula dentro :nth-child( )
Numero di elementi: {n}
Esempi di formule
Usa una forma come 2n+1, -n+3, odd, even o un singolo numero.