Selettori nei CSS

Conoscere come scegliere un elemento dalla struttura di una pagina html e essenziale nel utilizzo di linguaggio CSS. In questo articolo con video dal nostro corso CSS e testo  vediamo di scoprire i tipi di seletori e come esso funzionano. 

Selettore del tag

Ogni tag nel codice HTML corrispondente a cosiddetto selettore CSS. Ad esempio, il tag <p> è corrisponde a  selettore CSS   “p”, con il quale si puo scegliere  tutti i paragrafi sulla pagina HTML, per esempio, dopo aver selezionato tutti dipingere  in rosso. Dopo il selettore si dovrebbe mettere le parentesi graffe {}, in cui scrivere le proprietà CSS.

Coloriamo tutti i paragrafi in rosso

<p>  testo semplice </p>

p{ 
color: red;    
}

Testo semplice

Di conseguenza, tutti gli altri tag corrispondono a loro selettori: tag <div>  corrisponde al  selettore CSS div, tag <h1> corrisponde al  h1 selettore dei CSS, il tag <h2> in  CSS corrisponde a seletore  h2, e così via.
Raggruppamento selettori

La seguente situazione può verificarsi nelle situazioni come questa : è necessario fare la stessa cosa con diversi tag, ad esempio, per dipingere tutti i titoli h2, h3 e i paragrafi in rosso. In questo caso, selettori possono essere combinati e separati da virgole:

h2, h3, p{
        color: red;
}

<h2>Titolo h2</h2>
<h3>Titolo h3</h3>
<p>
       Paragrafo con testo.
</p>

Titolo h2

Titolo h3

Paragrafo con testo.

Un gruppo in questo caso puo contenere qualsiasi quantità di selettori separati da virgole, lo spazio tra di esso non è obbligatorio ma rende la sua letura piu facile  

Selettore contestuale (tag inseriti l'uno nell'altro, cosi detti selettori di discendenti )

Selettore di contesto permette di accedere ai tag che si trovano al interno di altri tag nella struttura HTMl del documento.

Per mostrare nidificazione del tag  bisogna nel selettore mettere  lo spazio fra di loro (lo spazio è un segno del selettore contestuale) .

Per esempio, immaginate una situazione in cui vogliamo scegliere solo i tag I(che trasforma teso in corsivo) , che si trovano  all'interno dei paragrafi, e non vogliono toccare quelle tag I, che sono all'interno di titoli h2.

Ad esempio, se scriviamo cosi  - p i  - sceglieremo tutti i tag “i”, situati all'interno del tag del paragrafo “p”,.

Nell'esempio che segue, ci rivolgiamo a tutti i paragrafi all'interno di un div e li coloriamo in  rosso. I paragrafi che si trovano fuori dal nostro div rimangono come prima,  come anche altri elementi creati con tag al interno del nostro div diversi dal tag selezionato  (nel nostro caso, h2) :

div.prova3 p{
color: red; 
}

<div>
        <h2>
                Titolo h2 al interno del tag  div.
        </h2>
        <p>
                Paragrafo al interno del tag  div.
        </p>
        <p>
                Paragrafo al interno del tag  div.
        </p>
        <p>
                Paragrafo al interno del tag div.
        </p>
</div>
<p>
        Paragrafo al esterno del tag  div.
</p>

Titolo h2 al interno del tag div.

Paragrafo al interno del tag div.

Paragrafo al interno del tag div.

Paragrafo al interno del tag div.

Paragrafo al esterno del tag div.

Il selettore di figli > (seletori dei elementi diretamente discendenti )

Il selettore di figli> selettore consente di scegliere i tag direttamente discendenti  solo I figli e non i nipoti e cosi via giu come nel caso dei selettori di discendenti

Che cosa significa,  analizziamo il seguente esempio: vogliamo scegliere tutti i   tag <i> (e coloriamo li  in rosso), che si trovano direttamente all'interno di un paragrafo senza modificare il tag <i>, che si trovano in primo luogo all'interno del tag <b>, e solo dopo all'interno di un paragrafo:

p > i{
        color: red;
}

<p>
        <i>questo i si trova direttamente nel tag  p</i>
        <b><i>questo tag i prima si trova al interno del tag b, e solo dopo al interno del tag  p</i></b>
</p>

questo i si trova direttamente nel tag p questo tag i prima si trova al interno del tag b, e solo dopo al interno del tag p

Gli spazi  intorno al segno> non sono obbligatori, ma di solito si mettono per facilitare la letura .

Selettore di adiacenti +

Selettore di adiacenti  (+ ) questo selettore consente di selezionare un elemento che è diretto vicino diciamo casa dopo casa . Ad esempio, in questo modo: p + H2 - Prenderò tutti H2, che seguono immediatamente subito dopo il paragrafo p (presenza di testo semplice non influenza , e la presenza di tag – invece si ).

Vediamo di scegliere  i tag  <i> (colorando li  in rosso), che si trova subito dopo il tag <b>, senza influenzare il resto del tag <i>:

b + i{
        color: red;
}

<p>
        <i>questo contenuto del tag  i prima di tag  b</i> testo
        <b>questo e il contenuto del tag  b</b> testo
        <i>questo contenuto del tag  i dopo il tag  b</i> testo
        <i>questo è contenuto del tag i dolo un altro tag i </i> testo
</p>

questo contenuto del tag i prima di tag b testo questo e il contenuto del tag b testo questo contenuto del tag i dopo il tag b testo questo è contenuto del tag i dopo un altro tag i testo

Selettore di successori ~

Selettore di successori ~ funziona come selettore di adiacente + ma non sceglie soltanto vicino diretto, ma tutti i vicini di seguito.

Selezioniamo  tutti i tag <i> (coloriamo li  in rosso), che si trovano dopo il tag <b>, senza influenzare il tag <i>, che sono posizionati prima del tag <b>:

b ~ i{
        color: red;
}

<p>
        <i>questo contenuto del tag  i prima di tag  b</i> 
        <b>questo e il contenuto del tag  b</b> 
        <i>questo contenuto del tag  i dopo il tag  b</i> 
<span> testo semplice     nel tag span</span>
        <i>questo è contenuto del tag i dopo il  tag b </i> testo
</p>
<i> e questo è il contenuto del tag I fuori dal paragrafo </i>

questo contenuto del tag i prima di tag b questo e il contenuto del tag b questo contenuto del tag i dopo il tag b testo semplice nel tag span questo è contenuto del tag i dopo il tag b testo

e questo è il contenuto del tag I fuori dal paragrafo

Notate che la presenza di altri tag  (in questo caso tag <span>) non influenza la selezione. Notate anche che la selezione  si estende fino alla fine del genitore (in questo caso paragrafo). Tag <i>, al di fuori del genitore non sarà selezionato (solo se non mettiamo il tag  <b> prima di esso).

Il selettore universale *

 Il selettore universale (*)permette di scegliere   tutti gli elementi della pagina. Ad esempio, usando questo tipo di selettore  posiamo  dipingere tutti gli elementi della pagina in rosso:

*{
        color: red;
}

L'uso eccessivo di questo selettore non è consigliato, in quanto rallenta il browser.

 E possibile utilizzare questo selettore non solo in una forma pura, ma anche in varie combinazioni con altri selettori . Per esempio, tramite esso posiamo scegliere tuti i tag che si trovano direttamente al interno di un paragrafo :

*{
      p > *{
        color: red;
}
}

E in questo modo selezioniamo tutti i tag I che si trovano al interno di qualsiasi tag che nella sua volta si trova al interno del tag del paragrafo :

p * i{
        color: red;
}

 Ultimi quatro seletori sono i seletori che non abbiamo toccato nel nostro corso dedicato ai CSS

Il selettore di id

Selettore di ID consente di accedere agli elementi con il loro nome specificato atraverso  l'attributo id, (un altro ID con lo stesso nome della pagina non dovrebbe essere creerebe un conflitto nel codice  conflitto).

 

Letto 466 volte