E' possibile raggruppare due o più selettori che vanno separati da una virgola, evitando così di applicare una regola per ogni selettore:
Con il selettore universale vengono selezionati tutti gli elementi di un documento. Viene espresso con l'asterisco * :
➙ Descendant selector (selettore del discendente)
Un elemento viene detto discendente quando un altro elemento è contenuto nel suo interno. Il selettore discendente seleziona questo tipo di elementi:
div p {color: black;} (vengono qua selezionati tutti i paragrafi <p> con elementi discendenti <div>)
p strong (vengono qua selezionati tutti gli elementi <strong> che si trovano all'interno di un paragrafo)
➙ Adjacent-sibling selector (selettore dell'elemento adiacente)
Selettore che serve a selezionare gli elementi adiacenti ad un altro. La relazione viene espressa con il segno +
Per esempio, se vogliamo attribuire il colore nero sia al titolo che al primo paragrafo di un documento
<h1>Titolo</h1>
<p>Paragrafo1</p>
la relazione sarà:
h1+p {color: black;}
L'applicazione non sarà valida per gli altri paragrafi a seguire dato che questo tipo di selettore relaziona solo gli elementi vicini, prossimi ad un altro.
Questo selettore non è riconosciuto da Explorer.
➙ Attribute selector (selettore dell'attributo)
Vengono selezionati gli elementi in base ai loro attributi e valori.
Questo tipo di selettore si può usare in quattro modi:
- attributo semplice, dove vengono selezionati tutti gli elementi che presentano un attributo.
- attributo con valore, dove vengono selezionati tutti gli elementi che presentano un valore dell'attributo con una stringa definita nella regola.
- attributo con valore che contiene una stringa, dove vengono selezionati tutti gli elementi con il valore dell'attributo dichiarato in una stringa.
-attributo il cui valore inizia o finisce con una stringa, dove vengono selezionati tutti gli elementi in cui il valore dell'attributo inizia o finisce con una stringa dichiarata nella regola.