Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad alcuni esempi.

Selettori di Base

Un “selettore” è l’istruzione in un set di regole CSS che indica al browser quali sono gli elementi da ‘selezionare’ per lo styling. Guarda i due esempi che seguono:
<style type="text/css">
	.box {
		background-color: aqua;
	}
	
	form textarea {
		background: color: purple;
	}
</style>
In ciascuno di questi esempi, il selettore è la parte del set di regole che appare prima della parentesi graffa aperta. “.box” è il primo selettore e “form textarea” è il secondo selettore.
Selettore universale
Questo selettore è costituito dal carattere asterisco, come in questo esempio:
<style type="text/css">
	* {
		background-color: aqua;
	}
</style>
Quando è usato da solo come sopra, seleziona ogni elemento della pagina.
Selettore per tipo
Chiamato anche “type selector”, questo selettore seleziona gli elementi HTML in base al nome del tag. Due esempi:
<style type="text/css">
	h3 {
		background-color: silver;
	}
	
	div {
		background-color: teal;
	}
</style>
Selettore per classe
Questo seleziona l’elemento che corrisponde al nome della classe definita con un attributo class nel codice HTML.
<style type="text/css">
	.elemento {
		background-color: teal;
	}
</style>
Questo è il mio selectore preferito e tutti gli sviluppatori CSS dovrebbero usarlo abbondantemente. È possibile inserire più classi separate da spazi su un singolo attributo di classe, il che rende questo selettore abbastanza potente.
Selettore per ID
Questo seleziona un elemento che corrisponde a un id definito come attributo id nel codice HTML.
<style type="text/css">
	#elemento {
		background-color: teal;
	}
</style>
Selettori per attributi
Questo selettore seleziona un elemento basato su un attributo HTML e/o il valore dell’attributo. Entrambi gli esempi che seguono sono selettori di attributo validi.
<style type="text/css">
	div[style] {
		background-color: teal;
	}
	
	input[type="text"] {
		background-color: teal;
	}
</style>
Il primo esempio seleziona ogni elemento <div> che ha un attributo “style”. Il secondo esempio seleziona ogni elemento <input> che ha un attributo “type” con il valore “text”.
Selettori Speciali
Selettore per discendenti
Questo selettore viene definito con un carattere di spazio che separa i due selettori e rappresenta un elemento figlio, ma non solo i figli immediati, anche quelli annidati sotto.
<style type="text/css">
	.padre .figlio {
		background-color: teal;
	}
</style>
Selettori per figli
Questo seleziona un elemento figlio immediato contenuto da un elemento padre.
<style type="text/css">
	.padre > .figlio {
		background-color: teal;
	}
</style>
Quindi lo stile “.figlio” non si applicherà agli elementi che non siano figli immediati dell’elemento “.padre”. Non può essere annidato all’interno di un altro elemento, deve essere un elemento figlio immediato. E solo ai figli che si applicherà lo stile e non al padre.
Selettori fratelli adiacenti
Questo selettore, che utilizza il segno più, si rivolge a tutti gli elementi che sono “adiacenti” gli uni agli altri, detti anche fratelli immediati, e devono avere lo stesso elemento padre.
<style type="text/css">
	h2+p {
		background-color: teal;
	}
</style>
Selettori fratelli generale
Questa regola utilizza il carattere tilde ed fa esattamente lo stesso del selettore fratelli adiacenti ad eccezione che gli elementi non devono essere fratelli immediati.
<style type="text/css">
	h2~p {
		background-color: teal;
	}
</style>
Pseudo classi
Anche se tecnicamente rientrano nella categoria dei “selettori”, questi non sono normalmente denominati “selettori”, ma solo pseudo-classi. Si tratta di un “selettore” di un elemento basato sul suo stato. Ecco alcuni esempi:
<style type="text/css">
	a:visited {
		background-color: teal;
	}
	
	input:focus {
		background-color: teal;
	}
</style>
Pseudo Elementi
Anche in questo caso non è normalmente indicato come un “selettore”, questi rappresentano in realtà gli elementi della pagina HTML che non sono realmente parte del rendering HTML:
<style type="text/css">
	p:first-letter {
		background-color: teal;
	}
	
	p:before {
		content: "";
		background-color: teal;
	}
</style>
Gli pseudo-elementi “:before” e “:after” sono unici da altri pseudo-elementi, nel senso che deve essere utilizzato insieme con la proprietà di content.
Similari
Fondamentali di jQuery
281% JQuery
[nextpage title=”Benvenuti”] jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
Python per tutti
97% Python
[nextpage title=”Copertina”] Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
Parti con jQuery
85% JQuery
Anche se la libreria più conosciuta e utilizzata fino a poco tempo fà era Prototype, c’è una nuova libreria chiamata jQuery, che include molte delle idee di Prototype e aggiunge molte altre nuove idee per derivare una libr…
Migliorare le prestazioni con jQuery
50% JQuery
Ero a caccia di trucchi per ottimizzare le prestazioni di jQuery che uso in una mia pesante applicazione web dinamica. Dopo aver scavato in un sacco di articoli ho deciso di fare una lista con i migliori suggerimenti e uti…
La Top 10 dei comandi in CSS3
48% Css
CSS3 sta davvero iniziando a prendere slancio con molti dei comandi descritti nel lavoro del progetto CSS3 supportato da Firefox, Safari e Google Chrome. Ho pensato di mettere insieme alcuni dei miei preferiti. [expand tit…