Lez.26 - Corso Intermedio Css

- SELETTORE di ELEMENTO
- SELETTORE di CLASSE
- SELETTORE di ID

I Selettori

I selettori sono molto importanti per un foglio di stile Css in quanto permettono di identificare in maniera precisa e assoluta a quale elemento della pagina ci si sta riferendo e quindi a quale elemento verrà applicato lo stile da noi elaborato.

Abbiamo tre tipi di sellettori e sono:
- selettori di elemento

- selettori di classe

- selettori di id

Selettori di elemento o di tipo

I selettori di elemento o di tipo sono identificati con i tag corrispondenti, come ad esempio il tag <p> (paragrafo), per identificarlo come selettore lo si inserisce nel tag style scrivendo semplicemente p e poi fatto seguire dal blocco delle dichiarazioni (ricordate: selettore {blocco delle dichiarazioni}).

In questa maniera vado ad identificare tutti ma proprio tutti gli elementi con il tag p all'interno della pagina.

Perciò se modifico lo stile del paragrafo con il selettore di elemento p modifico lo stile di tutti i paragrafi presenti nella pagina.

I selettori di classe

Il selettore di classe serve per poter identificare un gruppo di elementi anche di tipo differente che voglio che abbiano uno stile comune.
Ad esempio possono essere dei div, delle intestazioni o dei paragrafi che voglio che abbiano degli stili comuni, ma, ad esempio, non voglio che tutti i paragrafi abbiano lo stesso stile, ma solo alcuni di essi.

Allora costituisco una classe in questa maniera:
<p class="pippo">testo.....</p>
e costituisco la stessa classe (class="pippo") a tutti quelli elementi che voglio abbiano lo stesso stile, e poi la classe la richiamo nel tag style in questa maniera:
.pippo {blocco delle dichiarazioni}
la classe va sempre richiamata con avanti il puntino . (non dimenticatelo).

Il selettore di id

In particolare il Selettore ID seleziona un elemento html, in pratica individua, identifica un elemento unico che avrà uno stile tutto suo.

Soltanto quell'elemento avrà quel particolare id.

Quindi un seletore id è un codice identificativo (un marcatore, un'etichetta) che noi assegnamo a qualsiasi elemento della nostra pagina web e a qualsiasi tag.
Si inserisce all'interno di un qualsiasi tag html per identificarne la posizione, facciamo l'esempio di un div in questa maniera: <div id="due">, per poi essere richiamato con un asterisco, in questa maniera: #due, in un tag style per avere la possibilità di modificarne l'aspetto estetico.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>SELETTORE di ELEMENTO - SELETTORE di CLASSE - SELETTORE di ID</title>
  <meta charset="utf-8">
  <style type="text/css">
    div {
         width: 400px;
         border: 2px solid green;
         background-color: yellow;
      }
   .uno {
         background-color: aqua;
         border: 8px solid red ;   
      }
   #pane {
         background-color: darkgoldenrod;
         border: 4px solid yellow;
      }
   #panino {
         border: 4px dotted yellow;
      }
  </style>
 </head>
 <body>			    
    <h1>Selettore di Elemento o di Tipo</h1>
    <div>
	    <p>Testo di un div con selettore di Elemento o di Tipo</p>
    </div>
    <div>
	    <p>Altro testo di un secondo div con selettore di Elemento o di Tipo</p>
    </div>
    <h1> Div con Selettore di Classe</h1>
    <div class="uno">
	    <p>Paragrafo 1 con selettore di classe</p>
	    <p>Paragrafo 2 con selettore di classe</p>
	    <p>Paragrafo 3 con selettore di classe</p>
    </div>
    <h1> Altro Div con Selettore di Classe</h1>
    <div class="uno">
	    <p>Paragrafo 4 con selettore di classe</p>
	    <div id="pane" >
		 <h3>Div con selettore id="pane", figlio di un div di classe</h3>
		 <p>Paragrafo 5, id="pane", nipote di div class="uno"</p>
		 <p>Paragrafo 6, id="pane", nipote di div class="uno"</p>
	    </div>
	    <div id="panino">
		<h3>Div con selettore id="panino", figlio di un div di classe</h3>
		<p>Paragrafo 7, figlio di id="panino", nipote di div class="uno"</p>
		<p>Paragrafo 8, figlio di id="panino", nipote di div class="uno"</p>
	    </div>
    </div>
 </body>               
</html>