4. Tramite quelle semplici i selettori possiamo
attribuire le “regole” css ai vari elementi del nostro
DOM
5. Selettori di relazione
● Selettore di discendenti
div#container p {color: red}
● Selettore di figli (>)
body > p {color: red}
● Selettore di fratelli adiacenti (+)
li + li {marginleft: 10px; color: red}
● Selettore generale di fratelli (~)
h1 ~ h2 {color: red; textdecoration:
underline}
16. Pseudo-classe E:nth-child(n)
Seleziona ogni elemento E che è l'n-esimo figlio del
suo genitore.
tr:nthchild(2n+1) /* represents every odd row of an
HTML table */
tr:nthchild(2n) /* represents every even row of an
HTML table */
/* Alternate paragraph colours in CSS */
p:nthchild(4n+1) { color: navy; }
p:nthchild(4n+2) { color: green; }
p:nthchild(4n+3) { color: maroon; }
18. Pseudo-classe E:nth-child(n)
● can take 'odd' and 'even' as arguments
tr:nthchild(2n+1) /* represents every odd row of an
HTML table */
tr:nthchild(odd) /* same */
tr:nthchild(2n) /* represents every even row of an
HTML table */
tr:nthchild(even) /* same */
19. Pseudo-classe E:nth-last-child(n)
Seleziona ogni elemento E che è l'n-esimo figlio del suo
genitore, partendo dall'ultimo figlio.
tr:nthlastchild(n+2)
/* represents the two last rows of an HTML
table */
foo:nthlastchild(odd)
/* represents all odd foo elements in
their parent element,counting from the
last one */
20. Pseudo-classe E:nth-of-type(n)
Seleziona ogni elemento E che è l'n-esimo fratello
del suo tipo.
/*elementi p all'interno del div
distanziati di 2*/
div p:nthoftype(2n) {background
color: yellow}
21. Pseudo-classe E:nth-last-of-type(n)
Seleziona ogni elemento E che è l'n-esimo fratello
del suo tipo, partendo dall'ultimo fratello.
/* seleziono il penultimo p
all'interno del div*/
div p:nthlastoftype(2)
{backgroundcolor: yellow}
23. Pseudo-classe E:first-of-type
Seleziona ogni elemento E che è il primo fratello del suo tipo.
//dl dt:firstoftype
<dl>
<dt>gigogne</dt>
<dd>
<dl>
<dt>fusée</dt>
<dd>multistage rocket</dd>
<dt>table</dt>
<dd>nest of tables</dd>
</dl>
</dd>
</dl>
Non il terzo
25. Pseudo-classe
E:only-child
Seleziona ogni elemento E che è l'unico figlio del suo genitore.
E:only-of-type
Seleziona ogni elemento E che è l'unico fratello del suo tipo.
E:empty
Seleziona ogni elemento E che non ha figli (inclusi i nodi di testo)
27. Pseudo-classe di stato
E:enabled
Seleziona ogni elemento E dell'interfaccia utente (controllo di un
form) che è abilitato.
E:disabled
Seleziona ogni elemento E dell'interfaccia utente (controllo di un
form) che è disabilitato.
input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }
28. Pseudo-classe di stato
E:checked
Seleziona ogni elemento E dell'interfaccia utente
(controllo di un form) che viene selezionato.
input:checked { border:1px solid
#090; }
E::selection
Seleziona la porzione di un elemento E
attualmente selezionata o evidenziata dall'utente.