Un aspetto importante nel uso dei css è di potere selezionare elementi a quali applicare lo stile stesso.
Tale selezione può essere fatta basandosi sulla la loro posizione nella struttura della pagina (selettori css), su un nome specifico dato a l’elemento(classe e id) o su informazione al di fuori della struttura della pagina o di un nome.(pseudo-classi e pseudo-elementi).
Per facilitare la lettura di questo articolo, ho aggiunto l’index dei metodi di selezione classificati come selettori css, class e id, pseudo-classi e pseudo-elementi:
Selettori CSS:
- Selettore * : seleziona ogni singolo elemento della pagina
- Selettore di tipo : seleziona direttamente un elemento html
- Selettore di discendenti : seleziona un elemento discendente di un altro elemento
- Selettore > : seleziona i figli diritti e di primo livello d’un elemento
- Selettore + : seleziona un elemento direttamente adiacente ad un altro
- Selettore [atr] : seleziona un elemento con un certo attributo o un attributo con un certo valore
.class e #id:
- .class : seleziona gli elementi basandosi sul nome di una classe
- #id : seleziona un elemento basandosi sul nome identificativo (id)
Pseudo-classi:
- :first-child e :last-child : seleziona il primo o ultimo figlio di un elemento
- :link e :visited : definiscono lo stile css dei links prima e dopo essere stati visitati
- :hover e :active : definiscono lo stile css quando si passa sopra un elemento e una volta cliccato
- :focus : definisce lo stile css per un elemento selezionato in un modulo (elemento form)
Pseudo-elementi:
- :first-line : definisce lo stile css della prima riga di un elemento
- :first-letter : definisce lo stile css del primo carattere di un elemento
- :before e :after : definisce lo stile css d’un contenuto generato dopo o prima un elemento
Selettori CSS
1. Selettore *
Selettore * detto universale seleziona ogni singolo elemento della pagina.
Esempio regola css:
* {
font-style: italic;
color: red;
}
In questo caso, tutta la pagina avrà un carattere di colore rosso italico.
Guarda la pagina di prova per il selettore css *…
2. Selettore di tipo
Il selettore di tipo permette di selezionare direttamente un elemento html.
Esempio regola css:
h1{
font-style: italic;
color: red;
}
In questo caso, tutti gli elementi h1 avranno un carattere di colore rosso italico.
Guarda la pagina di prova per il selettore css di tipo…
3. Selettore di discendenti
Il selettore di discendenti seleziona gli elementi figli di un altro elemento.
Esempio regola css:
p span{
font-style: italic;
color: red;
}
In questo caso, tutti gli elementi span di un paragrafo avranno un carattere di colore rosso italico.
Esempio regola css:
#mioDiv a{
font-style: italic;
color: red;
}
In questo caso, tutti i link contenuto nel div con il nome id ‘mioDiv’ avranno un carattere di colore rosso italico.
Guarda la pagina di prova per il selettore css discendenti…
4. Selettore >
Selettore > seleziona i figli diretti e di primo livello d’un elemento
NB: NON supportato da Internet Explorer 6 e altre versione più basse
Esempio regola css:
body > p{
font-style: italic;
color: red;
}
Esempio HTML:
<body>
<p>Sono un figlio diretto e di primo livello di body</p>
<div>
<p>Non sono un primo figlio di body ma un paragrafo di secondo livello</p>
</div>
</body>
In questo caso, solo i paragrafi contenuti direttamente nel body avranno un carattere di colore rosso italico.
Invece se i paragrafi sono dentro un altro elemento, non sono più considerati come primi figli e la regola css non sarà applicata a loro.
Guarda la pagina di prova per il selettore css > …
5. Selettore +
Selettore + seleziona un elemento direttamente adiacente a un altro.
Esempio regola css:
div + p{
font-style: italic;
color: red;
}
Esempio HTML:
<div>Sono un elemento div</div>
<p>Sono un paragrafo direttamente adiacente a l’elemento div</p>
<p>NON Sono un paragrafo direttamente adiacente a l’elemento div</p>
In questo caso, solo il primo paragrafo subito dopo l’elemento div avrà un carattere di colore rosso italico.
La regola css non sarà applicata ai seguenti paragrafi.
Guarda la pagina di prova per il selettore css + …
6. Selettore [attr]
Selettore [attr] seleziona un elemento con un certo attributo o un attributo con un certo valore.
NB: NON supportato da Internet Explorer 6.
Esempio regola css per selezionare un elemento con un attributo senza specificare un suo valore:
p[id]{
font-style: italic;
color: red;
}
Esempio HTML:
<p id=”selezionato”>Sono un paragrafo con un attributo id</p>
<p>Sono un paragrafo senza un attributo id</p>
In questo caso, tutti i paragrafi con un attributo id avranno un carattere di colore rosso italico, qualunque sia il suo valore.
La regola css non sarà applicata ai paragrafi senza id.
Esempio regola css per selezionare un elemento con un attributo ed un valore specifico:
p[class="selezionato"]{
font-style: italic;
color: red;
}
Esempio HTML:
<p class=”selezionato”>Sono un paragrafo con un attributo class di valore ’selezionato’</p>
<p class=”altro”>Sono un paragrafo con un attributo class di valore differente di ’selezionato’</p>
<p>Sono un paragrafo senza un attributo class</p>
In questo caso, tutti i paragrafi con un attributo class di valore ’selezionato’ avranno un carattere di colore rosso italico.
La regola css non sarà applicata ai paragrafi senza l’attributo class o con un attributo class di valore differente di ’selezionato’
Guarda la pagina di prova per il selettore css di attributi…
.class e #id
1. Selettore .class
Seleziona un elemento basato sul nome di una classe (sintassi: .nomeClass).
Il selettore .class può essere riusato per più elementi che condividerano le stesse regole CSS basandosi sul nome della classe.
Esempio regola css:
p.miaClasse{
font-style: italic;
color: red;
}
Esempio HTML:
<p class=”miaClasse”>
Sono un paragrafo con il nome di classe ‘miaclasse’
</p>
In questo caso, tutti i paragrafi con il nome di classe ‘miaClasse’ avranno un carattere di colore rosso italico.
Le classe possono essere usate per piu elementi di tipo differente.
Esempio regola css:
.miaClasse{
font-style: italic;
color: red;
}
Esempio HTML:
<div class=”miaClasse”>Sono un elemento div con il nome di classe ‘miaClasse’</div>
<p> <span class=”miaClasse”>Sono un elemento span con il nome di classe ‘miaClasse’</span></p>
In questo caso, sia gli elementi HTML <div> che <span> avranno un carattere di colore rosso italico.
NB: si possono combinare più classe per un unico elemento.(supportato con difetti da Internet Explorer 6)
Esempio regola css:
.miaClasse1{
font-style: italic;
}
.miaClasse2{
color: red;
}
Esempio HTML:
<p class=”miaClasse1 miaClasse2″>Sono un elemento div con due nome di classe</p>
2. Selettore #id
Il selettore #id ha un nome unico che non può essere riusato per altri elementi. Le regole CSS sono applicate ad un elemento specifico
basandosi sul suo nome identificativo (id).
Esempio regola css:
#mioId{
font-style: italic;
color: green;
}
Esempio HTML:
<p id=”mioID”>Sono un paragrafo con un nome id ‘mioId’</p>
In questo caso, solo il paragrafo con il nome identificativo ‘mioId’ avrà un carattere di colore verde italico.
Guarda la pagina di prova per i selettori di classe e id…
Pseudo-classi
1. :first-child e :last-child
Le pseudo-classi :first-child e :last-child selezionano il primo o ultimo elemento, figlio d’un altro elemento.
NB: NON supportato da Internet Explorer 6.
:last-child NON supportato da Internet Explorer 7 e Safari 3.0
Esempio regola css per selezionare il primo elemento figlio:
#genitore p:first-child{
font-style: italic;
color: red;
}
Esempio HTML:
<div id=”genitore”>
<p>Sono un paragrafo, primo figlio dell’elemento div</p>
<p>Sono un paragrafo, secondo figlio dell’elemento div</p>
<p>Sono un paragrafo, terzo figlio dell’elemento div</p>
</div>
In questo caso, solo il primo paragrafo contenuto nell’elemento div avrà un carattere di colore rosso italico.
La regola css non sarà applicata ai paragrafi seguenti.
Esempio regola css per selezionare l’ultimo elemento figlio:
#genitore p:last-child{
font-style: italic;
color: red;
}
Esempio HTML:
<div id=”genitore”>
<p>Sono un paragrafo, primo figlio dell’elemento div</p>
<p>Sono un paragrafo, secondo figlio dell’elemento div</p>
<p>Sono un paragrafo, terzo ed ultimo figlio dell’elemento div</p>
</div>
In questo caso, solo l’ultimo paragrafo contenuto nell’elemento div avrà un carattere di colore rosso italico.
La regola css non sarà applicata ai paragrafi precedenti.
Guarda la pagina di prova per le pseudo-classi :first-child e :last-child…
2. :link e :visited
I pseudo-classi :link e :visited definiscono lo stile css dei links prima e dopo essere stati visitati
Esempio regola css per un link, elemento a di classe ‘mio_link’ con :link e :visited:
a.mioLink:link{
color: red;
}
a.mioLink:visited{
color: green;
}
Esempio HTML:
<a class=”mioLink” href=”#nogo”>Sono un link di classe ‘mioLink” di colore rosso prima di essere vistato, di colore verde dopo essere stato visitato</a>
3. :hover e :active
I pseudo-classi :hover e :active definiscono lo stile quando si passa sopra un elemento o una volta cliccato
NB: :active supportato da Internet Explorer solo per links, elementi a
:hover supportato da Internet Explorer 6 solo per links, elementi a
Esempio regola css per un link, elemento a con :hover e :active:
a:hover{
color: red;
}
a:active{
color: green;
}
Esempio HTML:
<a href=”#nogo”>Sono un link. Rosso se mi passa sopra, verde se mi clicca</a>
Esempio regola css per un paragrafo, elemento p con :hover e :active:
p:hover{
background-color: #F5F5F5;
}
p:active{
background-color: black;
color: white;
}
Esempio HTML:
<p>Sono un paragrafo. Sfondo grigio se mi passa sopra, sfondo nero con testo bianco se mi clicca</p>
Guarda la pagina di prova per le pseudo-classi :link, :visited, :hover, :active…
4. :focus
La pseudo-classe :focus definisce lo stile per un elemento selezionato in un modulo (elemento form)
NB: NON supportato da Internet Explorer 7 e versione inferiore.
Esempio regola css:
input:focus{
background-color: black;
color: white;
}
Esempio HTML:
<form action=”#”>
<label for=”nome”>Nome</label>
<input id=”nome” />
<label for=”email”>Email</label>
<input id=”email” />
</form>
In questo caso, il campo di testo selezionato avrà uno sfondo nero con testo bianco
Guarda la pagina di prova per la pseudo-classe :focus …
Pseudo elementi
1. :first-line
Il pseudo-elemento :first-line definisce lo stile css della prima riga di un elemento.
Esempio regola css:
#mioParagrafo:first-line{
font-style: italic;
color: red;
}
Esempio HTML:
<p id=”mioParagrafo”>La prima riga di questo paragrafo sarà di colore rosso italico</p>
2. :first-letter
Il pseudo-elemento :first-letter definisce lo stile css del primo carattere di un elemento.
Esempio regola css:
#mioParagrafo:first-letter{
font-style: italic;
color: red;
font-size: 30px;
}
Esempio HTML:
<p id=”mioParagrafo”>Il primo carattere di questo paragrafo sarà di colore rosso italico</p>
3. :before e :after
I pseudo-elementi :after e :before definisce lo stile css d’un contenuto generato dopo o prima un elemento
NB: NON supportato da Internet Explorer 7 e versione inferiore.
Esempio regola css:
#mioParagrafo:before{
content: “Sono un contenuto generato prima del paragrafo”;
font-style: italic;
color: red;
font-size: 30px;
}
#mioParagrafo:after{
content: “Sono un contenuto generato dopo il paragrafo”;
font-style: italic;
color: green;
font-size: 30px;
}
Esempio HTML:
<p id=”mioParagrafo”>Sono un paragrafo</p>
{ 5 trackbacks }
{ 0 comments… add one now }