> 
- Home Page
- > Manuale CSS
- > Pseudo-classi CSS
Le Pseudo-classi sono usate per aggiungere effetti diversi ad alcuni selettori o a parti di selettori.
Pseudo-classi CSS
Le pseudo-classi sono usate per aggiungere effetti diversi ad alcuni selettori o a parti di selettori.
Pseudo-classi
| Pseudo-classe | Utilizzo |
|---|---|
| active | Aggiunge uno stile al link selected |
| hover | Aggiunge uno stile al link quando ci passiamo sopra con il mouse |
| link | Aggiunge uno stile al link non visitato |
| visited | Aggiunge uno stile al link visitato |
| :first-child | Aggiunge uno stile ad un elemento che è il primo figlio di un altro |
| :lang | Per specificare la lingua usata |
Sintassi
Ecco la sintassi delle pseudo-classi:
selettore:pseudo-classe {
proprietà: valore;
}
Le classi CSS possono essere usate anche con le pseudo-classi:
selettore.classe:pseudo-classe {
proprietà: valore;
}
:a
Un link che è attivo, visitato, non visitato, o quando passiamo il mouse sopra, può essere visualizzato in modi diversi nei browser:
a:link, a:visited{
color: red;
text-decoration: none;
}
a:hover, a:active{
color: green;
text-decoration: underline overline;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ :first-child
La pseudo-classe :first-child agisce sul primo elemento figlio di un altro elemento.
Pseudo-classi e classi CSS
Le pseudo-classi possono essere combinate con le classi CSS per ottenere effetti speciali come ad esempio il menu di servizio di MorpheusWeb.it:
<style>
body {
background-color: black;
}
#menuHeaderUtility {
border: none;
width: auto;
float: right;
margin-top: 20px;
}
ul#menuHeader {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffcc;
list-style-type: none;
margin: 5px 0px 0px 0px;
padding: 0px;
}
ul#menuHeader li {
display: inline;
padding-right: 3px;
padding-left: 4px;
}
ul#menuHeader li a {
color: #ffffcc;
text-decoration: none;
}
ul#menuHeader li a:hover{
color: #C9F4F3;
text-decoration: none;
}
</style>
<div id="menuHeaderUtility">
<ul id="menuHeader">
<li><a href="#" title="Link 1">Link 1</a> | </li>
<li><a href="#" title="Link 2">Link 2</a> | </li>
<li><a href="#" title="Link 3">Link 3</a></li>
</ul>
</div>
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
