Selettori CSS: Combinatori e di base

Come spiegato nell’introduzione ai CSS, i selettori indicano l’elemento che vogliamo modificare. Se ad esempio scriviamo:

h1  { 
       color: red; 
     } 

h1 è il selettore: in altre parole, stiamo dicendo al browser che l’elemento h1 deve avere sempre il colore rosso. Vediamo ora i vari tipi di selettori.

Selettori di base

Con selettori di base ci riferiamo a quando selezioniamo degli elementi in base al nome (h1, p,) all’id o alle classi. Come verrà spiegato nella guida all’HTML noi possiamo assegnare una classe o un id ad un elemento. Vediamo:

<h1 id="importante">Titolo1</h1>
<p class="speciale">Paragrafo</p>

Per poter modificare questi elementi singolarmente richiameremo l’id o la classe

#importante  { 
       color: red; 
     } 
.speciale {
     background-color: green;
     color: orange;
    }

Possiamo impostare la classe a tutti gli elementi che vogliamo ma se vogliamo che solo l’elemento p con la classe speciale abbia determinate caratteristiche, allora scriveremo:

.speciale {
     background-color: green;
     color: orange;
    }
p.speciale {
     color: blue;
    }

Tenere presente che soltanto il colore cambierà per il paragrafo specifico mentre saranno valide tutte le proprietà menzionate nella classe generica (in questo caso il colore di sfondo sarà verde ma il colore del testo blu). Vedi l’esempio che ho scritto su W3Schools e prova anche a modificarlo.

Se più selettori hanno le stesse proprietà e valori non è necessario crearli singolarmente; possiamo raggrupparli e creare un solo blocco di dichiarazione:

h1, h2, h3  {
       text-align: center;
       color: red; 
     } 

Infine abbiamo il selettore universale che, in assenza di altri selettori o diversa indicazione per singoli elementi, vale per tutta la nostra pagina.

*  { 
       color: red; 
     } 

Selettori combinatori

Quando selezioniamo degli elementi in basa alla relazione che hanno con altri, stiamo parlando di selettori combinatori o di relazione. Immaginiamo di avere questa situazione:

Esempio di selettori CSS
Esempio di selettori combinatori
<body> 
  <h2>Titolo2</h2> 
  <h1>Titolo1</h1> 
    <p>Paragrafo1</p> 
  <div> 
    <p>Paragrafo2</p> 
    <section> 
      <p>Paragrafo3</p> 
    </section> 
  </div> 
  <h2>Titolo2</h2> 
</body>

Abbiamo quattro tipi di selettori combinatori (vedi anche l’esercizio):

/*Selettori di discendenti*/
div p {
  color: orange;
  }
/*Selettori di figli*/
div>p {
  color: blue;
  }
/*Selettori di fratelli adiacenti*/
h1+p {
  color: green;
  }
/*Selettori generali di fratelli*/
h1~h2 {
  color: red;
  }
  • Selettori di discendenti: Tutti gli elementi p dentro l’elemento div saranno di colore arancione. Senza altre indicazioni i paragrafi 2 e 3 diventeranno arancioni.
  • Selettori di figli: Gli elementi che sono direttamente figli, o discendenti di primo livello, a quello padre saranno blu. In questo caso il paragrafo 3 resterà arancione, essendo figlio diretto dell’elemento section, mentre il paragrafo 2 sarà blu.
  • Selettori di fratelli adiacenti: Si riferisce all’elemento che viene subito dopo quello precedente. Il paragrafo 1 sarà verde dato che si trova subito dopo il titolo 1.
  • Selettori generali di fratelli: Ogni volta che l’elemento due si trova dopo l’elemento uno sarà rosso. In questo caso ho inserito due volte il titolo 2; quello che si trova prima del titolo 1 non diventerà rosso.

Altri tipi di selettori

Abbiamo come selezionare i singoli elementi prendendoli da sè, in base all’id o alla classe e in base alla relazione che hanno con altri. Ci sono altri tipi di selettori che verranno spiegati in seguito:

  • Pseudo-classi
  • Pseudo-elementi
  • Selettori di attributo

Se vuoi restare aggiornato attiva le notifiche cliccando sul lucchetto che trovi accanto all’indirizzo del sito in altro a sinistra o seguimi sui social.