CSS * Selector
Il selettore CSS * seleziona tutti gli elementi. Può anche selezionare tutti gli elementi dentro un altro elemento. Leggi esempi pratici.
Il selettore * (asterisco) è il selettore universale. Corrisponde a ogni elemento
nel documento, indipendentemente dal tipo, dall'id o dalla classe.
Si ricorre a * principalmente in due situazioni: per applicare uno stile di base a tutti
gli elementi della pagina (un "reset"), oppure per selezionare tutti i discendenti
all'interno di un contenitore specifico, combinando * con un altro selettore.
Questo capitolo tratta la sintassi, due esempi eseguibili, il modo in cui * interagisce
con la specificità e le considerazioni sulle prestazioni da tenere a mente prima di usarlo.
Sintassi
* {
/* css declarations */
}Usato da solo, * seleziona ogni elemento. Combinato con un altro selettore e uno spazio
(un combinatore discendente), seleziona ogni elemento all'interno
di quell'obiettivo:
/* every element inside any <div> */
div * {
/* css declarations */
}Specificità
Il selettore universale ha una specificità pari a zero — (0, 0, 0). Non aggiunge
alcun peso a una regola. Ciò significa che quasi qualsiasi altro selettore (un nome di tag,
una classe, un id) sovrascriverà una dichiarazione proveniente da *, ed è esattamente per
questo che funziona bene per impostare valori predefiniti che regole più specifiche possono
poi affinare.
Esempio: selezionare ogni elemento
La regola seguente colora lo sfondo di ogni elemento nella pagina, inclusi <html>,
<body>, intestazioni e paragrafi:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<p id="example2">Lorem ipsum is simply dummy text...</p>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Esempio: selezionare ogni elemento dentro un <div>
Qui div * seleziona solo gli elementi annidati all'interno di un <div>.
Il <p> autonomo dopo il <div> mantiene il suo sfondo predefinito, mentre il <p> e
lo <span> all'interno del <div> vengono stilizzati:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div * {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<span id="example2">Lorem ipsum is simply dummy text...</span>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Un uso comune: un reset del box-sizing
L'utilizzo più diffuso di * nel mondo reale è la normalizzazione del modello a scatola,
in modo che padding e bordi non espandano più la larghezza di un elemento. Questo snippet
è presente in innumerevoli fogli di stile:
*,
*::before,
*::after {
box-sizing: border-box;
}Consulta box-sizing per scoprire cosa cambia con border-box.
Prestazioni e buone pratiche
- Usalo con parsimonia nei selettori annidati. Una regola come
*da sola è economica, ma combinandola in lunghe catene discendenti (ad esempio.nav ul li *) si costringe il browser a valutare più elementi. Per una singola regola di reset è trascurabile; evitalo in selettori profondamente annidati e frequentemente abbinati. - Preferiscilo per i reset, non per il theming. Poiché la sua specificità è
0,*è ideale per i valori predefiniti di base, ma una scelta inadatta quando si ha bisogno che una regola prevalga sugli altri stili. - Corrisponde agli pseudo-elementi solo quando lo si richiede.
*seleziona gli elementi;*::beforee*::aftersono necessari per coprire anche il contenuto generato, come nel reset qui sopra.
Selettori correlati
- Panoramica dei selettori CSS — l'elenco completo dei tipi di selettori.
- Selettori id e classe — selezionare elementi specifici.
:first-child— una pseudo-classe strutturale.