11 Selettori CSS che dovresti conoscere!

Giovanni Canella

23/11/2013

7104

Qualunque front-end developer deve possedere un'infarinatura generale, o anche più ampia, in quasi tutti gli ambiti a cui deve far capo. Infatti qualunque conoscenza maturata può tornare utile in un progetto, ma molte nozioni dopo un po' che non si usano, vengono lasciate nel dimenticatoio, e si scordano. Per esempio se non conoscete altri selettori CSS, oltre a quelli base: * (universale), # (id), . (classe), allora non dovete perdervi quest'articolo!

Questo perchè di solito, gli altri non vengono utilizzati molto spesso, in quanto sono impegati per casi particolari come vedremo di seguito!

10 Selettori CSS che dovresti conoscere!

 

1) A[attributo]

Seleziona l'attributo specificato all'interno delle parentesi quadre dell'elemento A. Non a caso viene chiamato selettore per attributo! Vediamo un esempio pratico, dove andremo a cambiare di colore i link che hanno l'attributo title, all'interno dell'elemento .

Quindi nel seguente caso:

<div id="contenitore">
    <a href="http://ginho.it" title="Sito">Home</a>
    <a href="http://ginho.it" title="Sito">Contattami</a>
    <a href="https://play.google.com">Google Play</a>
</div>
#contenitore a[title] {
	color: red;
}

Vengono colorati di rossi solo i primi due link.

2) A[href="URL"]

Seleziona tutti i link che hanno quello specifico url, all'interno del parametro href. Es. 

a[href="http://ginho.it"] {  
	color: red;
}

In questo caso quelli che hanno esclusivamente "http://ginho.it". Se volessimo prendere anche gli url nella "variante" senza http://, dobbiamo fare una piccola variazione.

a[href*="ginho"] {  
	color: red;
}

3) A + B

Seleziona esclusivamente l'elemento adiacente a quello specificato, che in questo caso è l'ipotetico B. Per esempio se scriviamo:

strong + p {
	color: #FF0000;
}

Tutti gli elementi adiacenti a , saranno di colore rosso.

<a href="index.php">Ciao</a>

<strong>Testo in grassetto</strong>
<p>Testo di colore rosso</p>

4) A ~ B

Simile al selettore visto precedentemente, ma meno rigido: in quanto seleziona tutti gli elementi B presenti all'interno di A, e non solo quello immediatamente successivo.

strong ~ p {
	color: red;
}

Con la seguente struttura:

<a href="index.php">Ciao</a>

<strong>Testo in grassetto</strong>
<p>Testo di colore rosso</p>
<p>Testo di colore rosso</p>
<p>Testo di colore rosso</p>
<p>Testo di colore rosso</p>

N.B = Per scrivere il simbolo ~ (tilde), la combinazione differisce in base al sistema operativo:

  • Linux: Alt + ì,
  • Windows: Alt + 1 2 6

Esempio A ~ B

 5) A > B

Ricorda vagamente i selettori visti prima, con l'unica differenza che prende tutti gli elementi figli, immediatamente successivi ad A (quelli diretti), senza tenere conto degli altri che possono venire dopo. Per esempio, con la seguente struttura HTML:

<div id="contenitore">
	<strong>Testo in grassetto</strong>
	<p>
		<strong>Testo di colore rosso</strong>
	</p>
</div>
 

E il codice CSS:

#contenitore > strong {
	color: red;
}

Cambia colore in rosso, solamente al primo , siccome è figlio diretto del div con id "contenitore", e non al secondo, siccome è figlio di un altro elemento: p.

 6) A:checked

Seleziona gli elementi di un form che sono stati selezionati, come per esempio radio button, una checkbox. 

input[type="radio"]:checked {  
	color: red;
}

E' compatibile con tutti i browser, ma con Internet Explorer dalla versione 9 in poi.

7) A:not(elemento)

Seleziona tutti gli elementi A, fatta eccezione per quello specificato tra le parentesi. Utile quando dobbiamo selezionare un ampio di numero di oggetti, scartando quelli contenuti in un div. Ecco un esempio pratico

a:not(#sitoEsterno) {  
	color: red;  
} 

dove coloriamo tutti i link di rosso, tranne l'elemento sitoEsterno.

E' compatibile con tutti i browser, ma con Internet Explorer dalla versione 9 in poi.

8) A:nth-child(N)

Identifica l'elemento numero N, all'interno del contenitore padre A. Può risultare molto utile quando si hanno degli stack di informazioni, e vogliamo ottenere una posizione specifica. Attenzione che l'indice non parte da zero come siamo abituati in questi ambiti, e pertanto se vogliamo ottenere il secondo elemento dobbiamo fare:

#stack li:nth-child(2) {  
	color: red;  
} 

e non:

#stack li:nth-child(1) {  
	color: red;  
} 

E' compatibile con tutti i browser, ma con Internet Explorer dalla versione 9 in poi.

9) A:nth-last-child() 

Molto simile al selettore visto precedentemente, con l'unica differenza che invece di partire dall'inizio, parte dalla fine dello stack, così potremo ottenere gli utlimi elementi in modo rapido e veloce.

#stack li:nth-last-child(2) {  
	color: red;  
} 

10) A:first-child

Questo pseudo classe ci permette di selezionare solo il primo figlio del padre.

Si potrebbe utilizzare per rimuovere i bordi dai primi e ultimi voci di elenco, invece di dover applicare manualmente una classe ai suddetti elementi e aggiungere codice inutile.

#lista ul li:first-child {  
	border-top: none;  
}  

 11) A:last-child

Come first-child, però ottiene come possiamo intuire dal nome, l'ultimo elemento da noi desiderato. Es.

#lista ul li:last-child {  
	border-top: none;  
}

 

Ti potrebbero interessare

I più letti