Sintaxi de pseudo-classes
Publicat el 21/03/2004
:first-child
La pseudo-classe :first-child selecciona l'element que és el primer fill d'un altre element.
Per fer que un paràgraf no tingui indentat quan sigui primer fill d'un div
div > p:first-child {
text-indent: 0;
}
Entre p i :first-child no hi pot haver cap espai.
nota: NO funciona en Internet Explorer 6. Si que funciona en Mozilla i en Opera 7.23
:last-child
La pseudo-classe :last-child selecciona l'últim fill d'un element
div > p:last-child {
border-bottom: 1px solid #ccc;
}
nota: NO funciona en Internet Explorer 6 ni en Opera 7.23. Si que funciona en Mozilla
:link i :visited
Via aquestes dues pseudo-classes es defineixen els estils pels links no visitats i pels links visitats.
:hover, :active i :focus
:hover s'aplica quan el cursor està sobre l'element.
:active s'aplica quan es pressiona el mouse sobre l'element.
:focus s'aplica quan l'element rep el focus.
Normalment s'utilitzen les quatre pseudo-classes següents per controlar el comportament dels elements <a>
a:link {
color: red;
}
a:visited {
color: gray;
}
a:hover {
color: blue;
}
a:active {
color: fuchsia;
}
Per les regles d'herència en cascada l'ordre de l'exemple és el correcte. Qualsevol altre ordre NO és vàlid.
Nota: la pseudo-classe :hover NO funciona correctament en Internet Explorer 6. Només és aplicable als elements <a>. Si que funciona en Mozilla i en Opera 7.23
La pseudo-classe :focus NO funciona en Internet Explorer 6. Si que funciona en Mozilla i en Opera 7.23
:lang
En xhtml és possible (i recomanable) especificar l'idioma que s'utilitza en un element mitjançant l'atribut lang.
Per identificar un paràgraf en català:
<p lang="ca">
El codi per identificar l'idioma consta generalment de dues lletres: "es" espanyol, "en" anglès, "de" alemany, etc.
Aquesta pseudo-classe permet descriure com ha d'apareixer un element segons l'idioma emprat.
La següent regla especifica el tipus de cometes que utilitzarà l'element <q> en anglès:
q:lang(en) {
quotes: '« ' ' »';
}
Nota: NO funciona en Internet Explorer 6 ni en Opera 7.23. Si que funciona en Mozilla