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
Finestre di messaggio CSS con CSS3
18% Css3
Quando si sviluppano applicazioni Web e si vuole visualizzare i messaggi all’utente, sarebbe opportuno renderli il più chiaro possibile. Inoltre, i colori possono dare all’utente una rapida occhiata su quello che sta succe…
Come cambiare il colore del testo selezionato
18% Css3
Sebbene questa dichiarazione CSS3 potrebbe non essere fondamentale per il vostro progetto o disegno e, anche se non è supportato da tutti i browser, si presenta come un effetto fantastico che da al progetto un’ulteriore sp…
Interazione con i campi di un form con CSS
11% Css
Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera. In questo post vedremo come evidenziare il…
Parti con jQuery
11% 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…
25 Tricks in CSS da conoscere
10% Css
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …