[GUIDA CSS #8] Analizziamo i selettori


[GUIDA CSS #8] Analizziamo i selettori

Oggi analizzeremo una delle parti più importanti dei CSS: i selettori. La parola lascia intendere di per sé quale sia la finalità di questi elementi, difatti il selettore identifica quella parte di documento soggetto alla regola che noi stessi scriveremo. Dopo questa breve introduzione andiamo ad analizzare i selettori nello specifico.

TYPE SELECTOR E RAGGRUPPAMENTO

Quello che è chiamato type selector è, a dirla tutta, il più semplice dei selettori. Esso indica un qualunque elemento della struttura HTML e lo modifica di conseguenza. Esempio a seguire:

h2 {
background : black;
color: white;
}

h1 {
background: white;
color: Black;
}

p {
color : blue;
}

In questo caso non facciamo altro che andare a modificare 3 elementi della struttura HTML (<h2>, <h1> e <p>). Per raggruppamento intendiamo l’ unire più elementi aventi la stessa regola CSS. Pensate ad esempio ad un codice di questo tipo:

p {background: white;}
h1 {background: white;}
h2 {background: white;}

In casi come questo, avendo i 3 elementi la medesima caratteristica, si può benissimo semplificare il codice separando gli elementi con una virgola come l’ esempio seguente:

p, h1, h2 {background: white;}

UNIVERSAL SELECTOR E DESCENDANT SELECTOR

L’ Universal selector (selettore universale), come si può intendere dal nome stesso non fa altro che raggruppare tutti gli elementi del nostro sito web in un unico simbolo, ossia l’ asterisco. Esempio:

* {background: black;}

Il Descendant selector (selettore del discendente) ha uno scopo ben preciso e, per comprenderlo al meglio, dovete avere ben chiara la gerarchia degli elementi presenti nella struttura HTML. Esso va letto da destra a sinistra per una più facile comprensione e specifica le regole di formattazione di un elemento discendente di un altro. L’ esempio vi chiarirà le idee:

div p {color: red;}
p strong {color: black;}

In questo caso, la prima dichiarazione formatta in rosso il testo presente nei paragrafi i quali, a loro volta, sono presenti nei tag <div>. La seconda dichiarazione formatta in nero il testo presente nel tag <strong> che utilizziamo all’ interno dei paragrafi presenti nella nostra pagina web.

CHILD SELECTOR

Quello che in apparenza vi può sembrare un selettore simile al descendant selector, è uno dei selettori meno utilizzati poiché le versioni di Internet Explorer precedenti (fino alla sesta versione) non lo supportavano. Esso è chiamato child selector (selettore del figlio) e formatta solo gli elementi figli diretti di un altro elemento, anch’ esso specificato nella regola. Come per il descendant selector, anche il selettore del figlio si legge da destra a sinistra, ma per aiutarvi a capire meglio di cosa stiamo parlando, guardate il codice HTML qui di seguito:

<body>
<p>Questo è il primo paragrafo</p>
<div>
<p>Questo è il secondo paragrafo</p>
</div>
<p>Questo è il terzo paragrafo</p>
</body>

Solo due dei paragrafi qui sopra sono figli diretti di <body>, difatti se notate attentamente il secondo paragrafo è figlio diretto di <div>, il quale a sua volta è figlio diretto di <body>. L’ immagine qui di seguito vi chiarirà le idee.

[GUIDA CSS #8] Analizziamo i selettori

Utilizzando il child selector, un’ altra cosa che cambia è la sintassi, difatti dovrete separare i due elementi con il simbolo “>”. Esempio a seguire:

body > p {color: black;}

ADJACENT-SIBLING SELECTOR E ATTRIBUTE SELECTOR

L’ Adjacent-sibling selector (selettore dell’ elemento adiacente) è un particolare tipo di selettore che ci permette di formattare un elemento immediatamente vicino ad un altro nella struttura HMTL. Anche in questo caso facciamo un esempio partendo dal codice HTML.

<h1>Titolo</h1>
<p>Questo è il primo paragrafo</p>
<p>Questo è il secondo paragrafo</p>

Questo tipo di selettore si avvale del simbolo “+”. Ecco un esempio di selettore dell’ elemento adiacente:

h1 + p {color:black;}

In questo caso a venire formattati saranno soltanto il tag <h1> e l’ elemento adiacente ad esso, ossia il primo paragrafo. Di conseguenza il secondo paragrafo non dovrà sottostare a questa regola.

Per quanto riguarda il selettore dell’ attributo invece, chiamato anche attribute selector, possiamo iniziare subito col dire che la sua presenza non è molto diffusa ma, tuttavia, garantisce un’ ottima flessibilità nello scrivere le regole che formatteranno la nostra pagina web. Ci sono 4 metodi possibili per utilizzare selettori di questo tipo. Esempio:

p [ id ] {color: black;}

In questo modo il colore del testo di tutti i paragrafi che presentano l’ attributo “id” verrà formattato in nero. Un altro metodo è il seguente:

p [ id = “text” ] { color:black; }

Con questa regola invece, verrà formattato di nero solo il testo contenuto nei paragrafi aventi “text” come valore dell’ attributo id. Il terzo metodo per scrivere un selettore dell’ attributo è il seguente:

img [ alt t= “foto” ] {margin: 10px;}

Il selettore qui sopra applicherà un margine di 10 pixel a tutte le immagini che nell’ attributo alt contengono la stringa “foto”, come per esempio:

<img src=”prova.gif” alt=”una bellissima foto”>

Ultimissimo metodo per utilizzare questo tipo di attributo è il seguente (analogo all’ esempio di sopra):

img [ alt |= “foto” ] {margin: 10px;}

In questo caso però il margine verrà applicato solamente alle immagini il cui testo in alt inizia con “foto”. Per qualunque dubbio o chiarimenti, scrivete pure nei commenti. A presto con la prossima lezione 😉

<- Lezione precedente (Regole e struttura dei fogli di stile)
Lezione successiva (Classi e ID) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *