CSS: il selettore

CSS: il selettore il selettore è una regola che definisce le proprietà di una parte o delle parti di un documento XHTML.

Selettori di elementi: sono gli elementi del linguaggio XHTML

h1 {color: #000000;}
h2 {background: #000000;}
h3 {background: #000000;}

possono essere raggruppati:

h1, h2, h3 {background: #000000;}

Selettore universale: seleziona tutti gli elementi di un documento XHTML, utilizzando il carattere asterisco *

* { color: #000000;}

 

Selettore discendente: seleziona tutti gli elementi che in una struttura ad albero di un documento XHTML sono discendenti di un altro elemento specificato nella regola, va letto da destra verso sinistra.

div p {color: #000000;}
p strong {color: #000000;}

 

Selettore del figlio: Seleziona un elemento che sia figlio diretto di un altro, utilizzando l'operatore > "maggiore di" da destra verso sinistra


<body>
<h1>Primo paragrafo</h1>
<div>
<h1>Secondo paragrafo</h1>
</div>
<h1>Terzo paragrafo</h1>
</body>
body > h1 {color: #000000;}

in questo esempio il primo ed il secondo H1 sono figli di body, mente il secondo H1 Ë figlio di DIV - selettore adiacente: Seleziona gli elementi che nel codice del documento siano subito adiacenti ad un altro:

h1 + p {color: #cccccc;}

<h1>Titolo</h1>
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>

solo il primo paragrafo avrà il testo grigio

Selettore dell'attributo: Seleziona gli elementi in base ai loro attributi e/o al valore di tali attributi. Non Ë molto utilizzato, anche se è molto potente:

- attributo semplice

input[id] {background: red;}

 

- attributo con valore

input[id="text"] { backgorund: red; }

 

- attributo il cui valore contiene una stringa

img[alt t="foto"] {margin: 10px;}

 

- attributo il cui valore inizia o finisce con una stringa

img[alt^="figura"] {margin: 10px;}