Sei sulla pagina 1di 3

I SELETTORI: RIEPILOGO

* selettore universale (seleziona tutti gli elementi)

h1 selettore di elemento h1
p selettore di elemento p
div selettore di elemento div

.grande selettore di classe (seleziona tutti gli elementi con attributo


class="grande")

p.grande selettore specifico di classe (seleziona solo i p con attributo


class="grande")

#piccolo selettore di id (seleziona gli elementi con attributo


id="piccolo")
nb: l'elemento in questione dovrebbe essere unico nel documento html

p#piccolo selettore specifico di id (seleziona solo l'elemento p con


attributo id="piccolo")
nb: l'elemento in questione dovrebbe essere unico nel documento html

h1,p,.grande selettore di raggruppamento


(i membri del gruppo sono: 2 selettori di elemento e un selettore di
classe)

selectorA selectorB selettore di discendente (selectorB è incapsulato sul


selectorA)
ESEMPIO 1:
div p Seleziona tutti i p che sono discendenti (figli, nipoti, ecc.) di
un div
ESEMPIO 2:

p.grande div Seleziona tutti i div che sono discendenti


(figli,nipoti,ecc.) di un p class=“grande”

selectorA>selectorB selettore di figlio (selectorB è figlio di selectorA)


ESEMPIO 1:
p.grande>div Seleziona tutti i div che sono figli di un p class=“grande”
ESEMPIO 2:
#container>* Seleziona tutti gli elementi che sono figli di un elemento
id=”container”

selectorA+selectorB selettore di fratello adiacente (selectorB deve


essere un fratello (minore) adiacente
di selectorA)
ESEMPIO:
div+p Seleziona solo i p che sono fratelli minori adiacenti di un div

selectorA~selectorB selettore generale di pari livello (selectorB deve


essere un qualsiasi fratello
(minore) di selectorA). Il simbolo tilde (~) si ottiene con la
combinazione Alt+126
ESEMPIO:
div~p Seleziona tutti i p che sono fratelli minori (di pari livello) di
un div
selectorA:status selettore di pseudoclasse (Selezione l’elemento quando
si trova in un determinato
stato)
ESEMPIO 1:
a:hover Seleziona tutte le a quando si trovano nello stato di hover (il
mouse ci passa sopra).
ESEMPIO 2:
header~section:hover Seleziona tutte le section (fratelli minori di pari
livello di una header)
quando si trovano nello stato di hover

selectorA::parte selettore di pseudoelemento (Seleziona la parte


specifica dell’elemento)
ESEMPIO 1:
div::after{
content:”Ciao”
display:block;
}
Inserisce il contenuto “Ciao” subito dopo una div
ESEMPIO 2:
p::first-letter{
color:red;
}
Colora di rosso la prima lettera di un elemento p
ESEMPIO 3:
div>p::first-letter{
text-decoration:underline;
}
Sottolinea la prima lettera di un elemento p figlio di una div

ELEMENTI IN LINEA (display: inline):


<a>, <b>, <br>, <i>, <img>, <label>, <map>, <u>

ELEMENTI IN LINEA-BLOCCO (display: inline-block):


<button>, <select>, <textarea>

ELEMENTI BLOCCO (display: block):


<article>, <aside>, <body>, <div>, <footer>, <form>, <hn>, <header>,
<hr>, <li>, <nav>, <ol>, <p>, <section>, <ul>,

SELETTORI DI PSEUDOCLASSE:
unvisited link  a:link
visited link a:visited
mouse over link  a:hover
selected link a:active

SELETTORI DI PSEUDOELEMENTO:
::first-letter
::first-line
::before
::after
::marker
::selection
COMANDI (parametri):
border:
padding:
margin:
color:
font-size:
font-family:
background-color:
width:
border-radius:
text-align:
display:
vertical-align:
text-decoration: