Lez.27 - Corso Intermedio Css

SELETTORI di RELAZIONE:
- Selettori Discendenti
- Selettori di Elementi Fratelli
- Selettori di Elementi Adiacenti

I Selettori di Relazione

I Selettori di Relazione sono importanti perchè vanno ad individuare dei gruppi di elementi o degli elementi singoli in base alla relazione che questi hanno con altri oggetti della pagina.


Selettori Discendenti:

Si dice Elemento Discendente un elemento contenuto in un altro a qualsiasi livello, quindi può essere suo figlio suo nipote e così via. Se io scrivo per esempio:
div p { } dove div è l'elemento contenitore e p è l'elemento discendente
significa che la mia regola css sarà applicata ai paragrafi che sono contenuti in qualsiasi div a qualsiasi livello.

Ora scriviamo: #tre < p { } con il segno maggiore diciamo al browser di applicare la regola css solo al figlio, cioè di applicare la regola solo all'elemento contenuto nel contenitore diretto, solo alla discendenza diretta e non ai nipoti e così via.

I Selettori di Elementi Fratelli.

Gli Elementi Fratelli sono quegli elementi che stanno allo stello livello degli altri elementi.
Se scriviamo:
h3 ~ p { } (il segno ~ si chiama Tilde e si scrive tenendo premuto Alt e digitare 126)
quello che abbiamo scritto significa che tutti i p (paragrafi) fratelli di h3, cioè gli p (paragrafi) che sono sullo stesso livello di h3, a tutti questi paragrafi applica la regola css che gli assegno.

Selettori di Elementi Adiacenti

Se scriviamo:
h3 + p { }
con il segno + diciamo che diamo una regola css ai p (paragrafi) che sono fratelli di h3 ma solo a quelli adiacenti, solo a quei paragrafi che sono fratelli e vicini appunto adiacenti.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>I selettori di Relazione: Selettori Discendenti, Selettori di Elementi Fratelli, Selettori di Elementi Adiacenti</title>
  <meta charset="utf-8">
  <style type="text/css">
    div {
	    width: 400px;
    }
    #uno, #due, #tre {
	    background-color: aqua;
	    border: 8px solid red ;   
    }
    #pippo {
	    border: 4px dotted #404CCC;
    }
    #pluto {
           border: 4px dotted yellow;
           }
           div p {
	           color: red;
           }
           #tre > p {
	           color: green;
           }
           h3 ~ p {           
		   color: azure;
           }
           h3 + p {
	           color: red;
		}
  </style>
 </head>
 <body>
   <h1>Selettori di Relazione</h1>
   <h2>Div uno, con un paragrafo figlio</h2>
   <div id="uno">
	   <h3>Div uno</h3>
	   <p>Paragrafo 1 figlio di div uno</p>
   </div>
   <h2>Div due con tre paragrafi fratelli</h2>
   <div id="due">
	   <h3>Div due</h3>
	   <p>Paragrafo 1 figlio di div due</p>
	   <p>Paragrafo 2 figlio di div due</p>
	   <p>Paragrafo 3 figlio di div due</p>
   </div>
   <h2>Div tre con 2 div figli, pippo e pluto, ciascuno con due   paragrafi.</h2>
   <div id="tre">
	   <h3>Div tre</h3>
	   <p>Paragrafo normanele figlio di tre.</p>
   <div id="pippo">
	   <h3>Div pippo</h3>
	   <p>Paragrafo 1, figlio di pippo, nipote di tre</p> <p>Paragrafo 2, figlio di pippo, nipote di tre</p>
   </div>

   <div id="pluto">
	   <h3>Div pluto</h3>
	   <p>Paragrafo 1, figlio di pluto, nipote di di tre</p>
	   <p>Paragrafo 2, figlio di pluto, nipote di di tre</p>
   </div>
   </div>
	   <p>Paragrafo che è fuori dal div e che non si colora di   rosso.</p>
 </body>               
</html>