selettori CSS

Questa traduzione è incompleta. Aiutaci a tradurre questo articolo dall’inglese

Nei CSS, i selettori vengono usati per selezionare elementi HTML della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

Prerequisiti: Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo: Apprendere nel dettaglio il funzionamento dei selettori CSS.

Cos'é un selettore?

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

Some code with the h1 highlighted.

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

Liste di selettori

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

h1, .special { 
  color: blue; 
} 

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

h1, 
.special {
  color: blue; 
} 

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

 

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

h1, ..special { 
  color: blue; 
} 

Tipi di selettori

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

Selettori di tipo, classe e ID

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

h1 { }

Include inoltre i selettori di classe:

.box { }

oppure di ID:

#unique { }

Selettori di attributo

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

a[title] { }

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

a[href="https://example.com"] { }

Pseudo-classi e pseudo-elementi

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

a:hover { }

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

p::first-line { }

Combinatori

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

article > p { }

Prossimo passo

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

Tabella riassuntiva dei selettori

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

Selettore Esempio Tutorial sui CSS
Selettore di tipo h1 {  } Selettore di tipo
Selettore universale * {  } Selettore universale
Selettore di classe .box {  } Selettore di classe
Selettore di ID #unique { } Selettore di ID
Selettore di attributo a[title] {  } Selettore di attributo
Pseudo-classi p:first-child { } Pseudo-classi
Pseudo-elementi p::first-line { } Pseudo-elementi
Combinatore di discendenza article p Combinatore di discendenza
Combinatore di figli article > p Combinatore di figli
Combinatore di fratelli adiacenti h1 + p Combinatore di fratelli adiacenti
Combinatore di fratelli generici h1 ~ p Combinatore di fratelli generici

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS