Selettori CSS 2.1

  • CSS
  • Gabriele Romanato

I selettori CSS 2.1 sono ancora oggi i selettori più usati dagli sviluppatori, anche se in alcuni aspetti ancora poco conosciuti. Scopo del presente articolo è quello di dare una descrizione completa dei selettori disponibili e della loro applicazione.

Definizione

Un selettore è composto da uno o più selettori semplici separati dai combinatori. I combinatori sono: spazio, ">" e "+". Lo spazio può ricorrere tra un combinatore e i selettori semplici. Gli elementi del documento che vengono selezionati da un selettore sono detti soggetti del selettore.

Raggruppamento

Quando più selettori condividono le stesse dichiarazioni, possono essere raggruppati in un elenco e separati da virgola:


h1, h2, h3 {font-family: Arial, sans-serif;}

Selettore universale

Il selettore universale (un asterisco, "*") seleziona ogni singolo elemento nel documento:


* {color: #000;}

Se il selettore universale non è il solo componente di un selettore semplice, può essere omesso:

  • *.box e .box sono equivalenti
  • *#box e #box sono equivalenti

Selettori di tipo

Un selettore di tipo seleziona un elemento in base al tipo di elemento, ossia seleziona ogni istanza del tipo di elemento nel documento:


p {line-height: 1.6;}

Selettori del discendente

Un selettore del discendente seleziona un elemento quando questo è il discendente di un altro elemento. Un selettore del discendente è costituito da due o più selettori separati da uno spazio:


h1 a {color: #000; text-decoration: none;}

h1 * {text-decoration: none;}

div p img {padding: 3px; border-style: solid;}

Selettori del figlio

Un selettore del figlio seleziona un elemento quando questo è il figlio di un altro elemento. Un selettore del figlio è costituito da due o più selettori separati da ">":


div > p {line-height: 1.6;}

div ol > li p {line-height: normal;}

Questo selettore non è supportato dalle versioni di Internet Explorer inferiori alla 7.

Selettori del fratello adiacente

I selettori del fratello adiacente hanno la seguente sintassi: E1 + E2, dove E2 è il soggetto del selettore. Il selettore seleziona E2 se E1 ed E2 hanno lo stesso genitore e se E1 precede immediatamente E2 nell'albero del documento, ignorando i nodi diversi da quelli degli elementi (come i nodi testuali ed i commenti):


h1 + p {text-indent: 1em;}

Questo selettore non è supportato dalle versioni di Internet Explorer inferiori alla 7.

Selettori di attributo

I selettori di attributo selezionano gli elementi che hanno determinati attributi nel documento sorgente. Sono divisi in quattro tipi:

  1. E[attr]

    Seleziona qualsiasi elemento sulla base della presenza di un attributo, a prescindere dal suo valore. Viene detto selettore di attributo semplice.

    
a[title] {border-bottom: 1px dashed; text-decoration: none;}
  2. E[attr="valore"]

    Seleziona qualsiasi elemento sulla base del valore esatto dell'attributo. Viene detto selettore di valore esatto di attributo.

    
a[title="Link esterno"] {color: #008; background: #ffc;}
  3. E[attr~="valore"]

    Seleziona qualsiasi elemento sulla base di una parte del valore di un attributo separata da uno spazio. Viene detto selettore di valore parziale di attributo.

    
p[class~="importante"] {font-weight: bold;}

    che selezionerà, ad esempio:

    
<p class="nota importante">...</p>
  4. E[lang|="L"]

    Seleziona qualsiasi elemento con un attributo lang il cui valore è un elenco di valori separati da trattini, che inizia con il valore L specificato nel selettore. Viene detto selettore di attributo di lingua.

    
html[lang|="en"] {background: #ccc; color: #000;}

Questi selettori non sono supportati dalle versioni di Internet Explorer inferiori alla 7.

Selettori di classe

Un selettore di classe seleziona uno o più elementi in base al valore dell'attributo class specificato per essi:


.importante {color: #000; background: #ffc;}

p.nota {border: 1px solid #000;}

La prima dichiarazione si applicherà a tutti gli elementi con classe .importante, mentre la seconda solo agli elementi p con classe .nota. È possibile combinare le classi:


<p class="nota importante">...</p>

Si noti il punto (".") unito al nome della classe. Una classe può essere usata più volte nello stesso documento.

Selettori di id

Un selettore di id seleziona un elemento in base al valore del suo attributo id. Un id può essere usato una sola volta nel documento:


#box {width: 200px; margin: 1em 0;}

div#foo {border: 1px solid #000;}

La prima dichiarazione selezionerà un elemento con id uguale a box, indipendentemente dal tipo di elemento. La seconda invece selezionerà solo un elemento di tipo div. Si noti il simbolo di cancelletto ("#") unito al nome dell'id.

La pseudo-classe :first-child

NOTA: Una pseudo-classe è un tipo di selettore che permette di operare una selezione in base a delle informazioni esterne all'albero del documento.

La pseudo-classe :first-child seleziona un elemento se questo è il primo figlio di un altro elemento:


div p:first-child {margin: 0 1em;}

Questo selettore non è supportato dalle versioni di Internet Explorer inferiori alla 7.

Le pseudo-classi :link e :visited si applicano, rispettivamente, a quei link non visitati e visitati (ossia presenti o meno nella cronologia del browser):


a:link {color: blue;}
a:visited {color: purple;}

Le pseudo-classi dinamiche: :hover, :active, :focus

Queste pseudo-classi si applicano in base a determinate azioni dell'utente:

  • :hover

    Si applica quando l'utente sceglie un elemento con il mouse ma non lo attiva. I browser la applicano quando si passa con il mouse sul box generato da un elemento.

  • :active

    Si applica quando un elemento viene attivato dall'utente, per esempio nel lasso di tempo in cui l'utente preme il bottone del mouse e lo rilascia.

  • :focus

    Si applica quando un elemento riceve il focus, ossia quando accetta eventi da tastiera o altre forme di input testuale.

Se applicate ai link, le pseudo-classi sinora esaminate devono essere specificate in questo ordine:

  1. a:link { }
  2. a:visited { }
  3. a:hover { }
  4. a:active { }
  5. a:focus { }

Si possono applicare le pseudo-classi dinamiche anche ad altri elementi, come quelli dei form:


input:focus {outline-style: dotted; background: #ffc;}

Il supporto di Internet Explorer alle pseudo-classi dinamiche è parziale.

La pseudo-classe della lingua :lang

La pseudo-classe :lang(L) seleziona un elemento se l'elemento è nella lingua L:


p:lang(it) {text-indent: 1em;}

Lo pseudo-elemento :first-line

NOTA: Gli pseudo-elementi accedono a delle informazioni che si trovano al di fuori dell'albero del documento, creando delle astrazioni esterne a quest'ultimo.

Lo pseudo-elemento :first-line seleziona la prima riga di un elemento di blocco, inline-block, didascalia o cella di tabella:


p:first-line {text-transform: uppercase;}

Questo selettore non è supportato da Internet Explorer 5.x per Windows.

Lo pseudo-elemento :first-letter

Lo pseudo-elemento :first-letter seleziona la prima lettera di un elemento di blocco, se la lettera iniziale non è preceduta da altro contenuto (immagini e tabelle inline). Gli si possono assegnare le seguenti proprietà:

  • proprietà dei font
  • text-decoration
  • text-transform
  • letter-spacing
  • word-spacing
  • line-height
  • float
  • vertical-align (se float è none)
  • proprietà del margine
  • proprietà del padding
  • proprietà del bordo
  • color
  • proprietà dello sfondo

p:first-letter {
float: left;
font: italic bold 200%/1 serif;
}

Questo selettore non è supportato da Internet Explorer 5.x per Windows.

Gli pseudo-elementi :before e :after

Questi pseudo-elementi vengono usati per inserire contenuto generato prima (:before) e dopo (:after) il contenuto di un elemento. Vengono di solito usati insieme alla proprietà content:


p:before {content:"Nota "; font-weight: bold;}

h1:after {content: url("img.gif");}

Questi pseudo-elementi possono essere usati contemporaneamente:


a[title="Link esterno"]:before {
content: '\2022';
padding-right: 2px;
}

a[title="Link esterno"]:after {
content: "[" attr(href) "]";
padding-left: 2px;
}

Questi selettori non sono supportati da Internet Explorer 6 e 7.

Torna su