{ I selettori CSS }

Senza non si entra nei div...

Voglio chiarire un discorso che può sembrare spinoso, ma i realtà è un concetto basilare ed elementare dei CSS, senza dei quali, in diversi scenari, non si riesce a capire perchè "quel div" non vul prendere le nostre regole!
A tal punto si introduce il discorso dei selettori, ce ne sono diversi ma in relazione all'argomento ne prenderò in considerazione due che poi sono i più utilizzati con i quali si risolve più o meno tutto...

  • Selettore di discendenti
  • Selettore di figli

Prima di addentrarmi nell'argomento voglio fare un esempio per chiarire a priori l'argomento. Pensiamo ad una casa, in essa delle stanze e in queste ci sono delle luci accese o spente. Se volessimo spegnere o accendere una delle luci e siamo chiusi fuori casa, cosa ci serve? Risposta banale: la chiave. Immaginiamo che la chiave sia i selettori CSS e la casa un div o elemento principale e le stanze sono i div annidati nell'elemento principale, le luci possono essere lo style che possiamo dare ad un dato elemento, colore dimensione ecc. A questo punto, credo che affrontare il discorso sia abbastanza intuitivo, alter due parole quattro esmpi ed è fatta...
Prendiamo in ora in esame il Selettore di discendenti e nel codice simuliamo un menu dove i Link sono di colore rosso e per esempio dobbiamo colorare il Link 1 colore verde. Vi ricordo l'esempio delle stanze della casa, il tag nav sarà la casa e l'elenco ordinato le stanze che avranno le luci color rosso e una la dobbiamo far diventare verde, un pò bizzarro ma credo sia chiaro...

Codice:
<nav id="menu">
<ul id="menu-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>

Ora assegnamo lo stile al menu.

CSS:
<style>
nav#menu ul#menu-nav a{color:#ff0000}/*in esadecimale corrisponde al colore rosso*/
</style>

Con questa riga tutti i link avranno colore rosso, ma abbiamo detto che il link 1 dobbiamo "accenderlo" con il verde. A questo punto velocemente assegnamo una classe al link 1 e gli diamo un colore verde, ma simulo l'errore frequente, con il quale il link rimarrà invariato...

CSS:
<style>
nav#menu ul#menu-nav a{color:#ff0000}
.green{color:green}
</style>

Quindi aggiungendo la classe "green" al link 1, il codice del menu risulterebbe in questa maniera.

Codice:
<nav id="menu">
<ul id="menu-nav">
<li><a class="green" href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>

Purtroppo ci si accorge che la lampadina nella stanza rimane di colore rosso... Per riparare al disastro, prendiamo le famose chiavi, e alla classe green aggiungiamo i selettori per aprire la porta e cambiare la lampadina, quindi cambiare il colore del link 1

CSS:
<style type="text/css">
nav#menu ul#menu-nav a{color:#ff0000}
nav#menu ul#menu-nav a.green{color:green}
</style>

fatta la correzione, ricarichiamo la pagina e come per magia , il Link 1 è diventato color verde.
Quindi per chiarire ulteriormente, i link del menu sono i discendenti del tag ul con id menu-nav, a sua volta il tag ul con id menu-nav è discendente del tag nav con id menu.
Ora passiamo al Selettore di figli rappresentato con il simbolo di una parentesi a freccia ">" se bene i due selettori possano sembrare uguali, in realtà c'è una differenza legata alla relazione di discendenza tra gli elementi, facciamo subito un esempio per eliminare i dubbi...
Supponiamo di avere una pagina con dei paragrafi, riportati nel codice qui sotto

Codice:
<body>
<div id="text">
<p>Questo è il primo paragrafo</p>
<p>Questo è il secondo paragrafo</p>
</div>
<p>Questo è il terzo paragrafo</p>
</body>

Notare che il primo e secondo paragrafo sono incapsulati in un div, quindi se scrivo la regola css seguente.

CSS:
<style type="text/css">
body > p {color: green}
</style>

In questa regola si legge che solo il terzo paragrafo è figlio del tag body, mentre il primo e secondo paragrafo sono figli diretti del div con id text, per tanto solo il terzo paragrafo sarà colore verde.
Spero di essere stato chiaro e sintetico, se avete domande potete aprire una chat con whatsapp o scrivere un post.

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?