Secció 2: Selectors

5. Selectors pseudoclasse: links

Aquest és un tipus de selector una mica més especial que els anteriors. En realitat no serveix per seleccionar un element, sinó un element en un estat determinat. D'aquí el nom de pseudoclasse. De fet és un tipus de selector específic per a l'element A (link).

La sintaxi és potser la més especial que hem vist fins ara, però és igualment simple: només hem d'escriure l'element A seguit de dos punts (que indiquen que és pseudoclasse), i la paraula clau que correspon a l'estat del link:

• link - l'estat 'normal'
• visited - link que ja ha estat visitat
• active - link en el que estem fent clic
• hover - correspon al fet de moure el punter del mouse per sobre del link

A:link { color: red; }
A:visited { color: maroon; }
A:active { color: black; }
A:hover { color: red; text-decoration: underline; }

De fet és un concepte semblant als atributs link, alink i vlink de l'element BODY, que ens permetien determinar el color d'aquests tres estats dels links. La diferència és que ara podrem triar no només el color, sinó qualsevol altra propietat! (subratllat, negreta, color de fons...). A més, disposem de la opció A:hover, que obre encara més possibilitats.

Nota: el selector hover no està suportat per Netscape 4.x. Com ja deus saber, aquest navegador té una capacitat de representació de CSS més que limitada :-/

Com que aquests selectors són específics per als links, podem estalviar-nos la A i escriure senzillament :link, :visited, etc.

Podem combinar selectors pseudoclasse amb selectors de classe, selectors contextuals i de fet qualsevol altre tipus de selector. A continuació et proposo alguns exemples, però el millor és experimentar una mica. Si ets creatiu podràs aconseguir que els teus links siguin ben particulars.

A { text-decoration: none; }
A:visited { color: olive; }
A:active { color: green; }

A:hover { text-decoration: underline; }

A.menu:hover {
text-decoration: underline overline; }

P#titol A:hover {
border-style: solid; border-width:1px; padding:4px;
text-decoration: none; }

Recorda que amb els selectors pseudoclasse les A es poden ometre.

Comento una mica l'exemple anterior. La primera sentència fa que tots els links estiguin sense subratllar (per defecte, la majoria de navegadors els subratllen). Com que no utilitzo cap pseudoclasse, aquesta propietat s'aplicarà independentment de l'estat del link sempre que no especifiquem el contrari. Les dues sentències següents defineixen el color dels estats 'visited' i 'active'.

A continuació defineixo tres tipus de links, però només pel seu estat 'hover'. És a dir, els links en estat 'visited' i 'active' continuaran amb els colors que hem definit anteriorment i sense subratllar. Respecte els 'hover', en principi seran subratllats (sentència 4), llevat que tinguin l'atribut class="menu", i per tant estaran subratllats (underline) i 'sobreratllats' (overline) alhora (sentència 5), o que estiguin inclosos en l'element P amb id="titol" (sentència 6), i en aquest darrer cas apareixerà una 'caixa' al voltant del link. Uf, enrevessat oi? Si vols clica aquest link per veure com funciona l'exemple.