Lez.28 - Corso Intermedio Css

SELETTORI MULTIPLI

I Selettori Multipli

I Selettori Multipli prevedono l'utilizzo di più selettori contemporaneamenti.
Possiamo classificare i selettori multipli in Selettori Raggruppati oppure Selettori Combinati.

I Selettori Raggruppati:

sono dei selettori che si possono raggruppare in un unica dichiarazione separandoli semplicemente con una virgola es: h1,h2,h3 { }.

I Selettori Combinati:

prevedono la combinazione di un selettore di elemento con un selettore di classe.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Selettori Multipli</title>
  <meta charset="utf-8">
  <style type="text/css">
     div {
	     width: 400px;
     }
     #uno, #due, #tre {
	     background-color: aqua;
	     border: 8px solid red ;   
     }
     #pippo {
	     background-color: darkgoldenrod;
	     border: 4px dotted #404CCC;
     }
     #pluto {
	     border: 4px dotted yellow;
     }
  </style>
 </head>
 <body>
  <h1>Selettori Multipli</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 3</h3>
	  <p>Paragrafo normanele figlio di tre.</p>
	  <div id="pippo">
		  <h3>Div pippo</h3>
		  <p>Paragrafo 1, figlio di pippo, nipote di div  tre</p>
		  <p>Paragrafo 2, figlio di pippo, nipote di div  tre</p>
	  </div>

	  <div id="pluto">
		  <h3>DIV pluto</h3>
		  <p>Paragrafo 1, figlio di pluto, nipote di div tre</p>
		  <p>Paragrafo 2, figlio di pluto, nipote di div  tre</p>
	  </div>
  </div>
 </body>               
</html>