4/11/14

Nouveaux sélecteurs CSS : les pseudo-classes

Les éléments balisés comme lien (balise a) ont une particularité, le navigateur enregistre si le lien a été visité ou pas. Ceci se traduit par deux états possibles de l'élément a et donc deux apparences différentes.

On peut controler ces états par les sélecteurs CSS ci-dessous :

Les deux sélecteurs d'états link et visited ne sont utilisables qu'avec un lien.

Par ailleurs le rendu du document html est calculé par le navigateur avant l'affichage de la page, mais une fois la page affichée, un objet supplémentaire est visible à l'écran : le pointeur de la souris. Les règles CSS permettent de tenir compte de ce pointeur pour changer l'apparence d'un élément dynamiquement, c'est à dire en fonction de l'état de la souris.

Il y a 2 sélecteurs possibles :

Ces deux sélecteurs sont utilisables avec TOUT élément HTML (lien ou non) ; au-dessus signifie au dessus de la boite de l'élément.

Les propriétés associées à ce sélecteur ne seront appliquées qu'à cet instant, ce qui veut dire que le navigateur recalcule la page entière en tenant compte de ces nouvelles propriétés ; dès que le pointeur ne sera plus dans cet état la page reviendra à la forme précédente.

C'est pourquoi on dit que ce sont des sélecteurs dynamiques.

En CSS, ce nouveau type de sélecteur élément:état s'appelle une pseudo-classe.

Dans le menu de navigation de "keepers.html" supprimez le "souligné" des liens (attribut text-decoration) et changez leur apparence au passage de la souris.

Faites une règle changeant la couleur de fond avec la pseudo classe :hover pour les paragraphes d'un document html.

Testez la règle: *:hover {border: 1px solid red}