Sélecteurs CSS 2.1, partie 3publié le 24/10/2005 par Roger Johansson, traduit le 22/09/2009

Cet article est une traduction de CSS 2.1 selectors, Part 3, écrit par Roger Johansson pour son blog 456 Berea Street.

Voici la troisième et dernière partie de cette série expliquant les sélecteurs disponibles en CSS 2.1. La partie 1 concernait les aspects basiques comme les sélecteurs de type, de classe et d'ID, le sélecteur universel et les sélecteurs simples. La partie 2 traitait des combinateurs, des sélecteurs combinés, du regroupement et des sélecteurs d'attribut.

Je vais cette fois m'intéresser aux pseudo-classes et pseudo-éléments. Comme les sélecteurs les plus avancés décrits en partie 2, les pseudo-classes et pseudo-éléments ne sont pas encore totalement supportés dans les principaux navigateurs. Il est important de s'en souvenir et de vérifier ce qu'il advient quand le support fait défaut. Il serait en effet dommage que votre contenu soit inaccessible dans les navigateurs ne supportant pas les CSS décrites ici.

Pseudo-classes et pseudo-éléments

Les pseudo-classes et pseudo-éléments peuvent être utilisés pour formater des éléments en se basant sur des informations non disponibles dans l'arbre du document. Par exemple, il n'existe aucun élément faisant référence à la premère ligne d'un paragraphe ou à la première lettre d'un contenu texte.

Pseudo-classes

Les pseudo-classes ciblent les éléments en fonction de caractéristiques autres que leurs noms, attributs ou contenus.

:first-child

Cette pseudo-classe correspond à tout élément qui est le premier enfant d'un autre élément. Disons que vous voulez donner un style particulier au premier paragraphe d'un article. Si l'article est contenu dans un élément div ayant la classe article, alors la règle suivante correspondrait au premier élément p de chaque article :

div.article p:first-child {font-style:italic;}

Pour cibler tous les éléments p qui sont les premiers enfants de n'importe quel élément, vous pouvez utiliser le sélecteur de cette règle :

p:first-child {font-style:italic;}

:link et :visited

Les pseudo-classes d'ancre affectent les états non visités et visités d'un lien. Les deux états sont exclusifs : un lien ne peut être à la fois visité et non visité.

Ces pseudo-classes s'appliquent uniquement aux ancres ayant une destination externe au document. En HTML, cela veut dire tous les éléments a ayant un attribut href. Puisque ces pseudo-classes n'affectent aucun autre élément, les sélecteurs suivants sont identiques :

a:link
:link

:hover, :active et :focus

Les pseudo-classes dynamiques peuvent être utilisées pour contrôler la présentation de certains éléments en fonction d'actions effectuées par l'utilisateur.

:hover s'applique quand une personne utilise un dispositif de pointage pour survoler un élément mais sans l'activer. Il s'agit le plus souvent de l'utilisation d'une souris pour amener le curseur à survoler un élément.

:active s'applique quand un élément est activé par l'utilisateur. Pour les personnes se servant d'une souris, cela signifie que le bouton de cette dernière est pressé.

:focus s'applique tant qu'un élément a le focus, c'est-à-dire tant qu'il accepte des événements clavier.

Un élément peut éventuellement correspondre à plusieurs pseudo-classes en même temps. Un élément peut ainsi avoir le focus et être survolé :

input[type=text]:focus {background:#FFE; color:#000;}
input[type=text]:focus:hover {background:#FFF;}

La première règle correspondra à tout élément input commandant une saisie de texte sur une seule ligne et qui a le focus, tandis que la deuxième correspondra aux mêmes éléments mais quand ils sont également survolés.

:lang

La pseudo-classe de langue peut être utilisée pour styler un élément dont le contenu est défini dans une certaine langue (langage humain et non langage des balises). La règle suivante définit quels guillemets utiliser pour une citation de type en ligne en suédois :

q:lang(sv) {quotes:"\201D" "\201D" "\2019" "\2019";}

Le langage humain d'un document ou du contenu d'un élément est normalement spécifié avec l'attribut lang en HTML et l'attribut xml:lang en XHTML.

Pseudo-éléments

Les pseudo-éléments permettent aux auteurs d'accéder et de formater des parties de document qui ne sont pas disponibles en tant que nœuds dans l'arbre du document.

:first-line

Le pseudo-élément :first-line affecte la première ligne du contenu texte d'un élément^[a]. Ceci s'applique uniquement aux éléments de type block, inline-block, table-caption et table-cell.

La longueur de la première ligne dépend évidemment d'un certain nombre de facteurs tels que la taille des caractères et la dimension de l'élément contenant le texte.

La règle suivante s'appliquera à toutes les premières lignes de texte des paragraphes :

p:first-line {color:#600; font-weight:bold;}

A noter qu'il existe des restrictions sur les propriétés applicables au pseudo-élément :first-line. Consulter CSS 2.1, 5.12.1 Le pseudo-élément :first-line pour une liste de ces propriétés.

:first-letter

Ce pseudo-élément permet de cibler la première lettre ou chiffre d'un élément, et s'applique aux types block, inline-block, list-item, table-caption et table-cell.

La règle suivante s'appliquerait au premier caractère d'un élément ayant une classe preamble :

.preamble:first-letter {font-size:1.5em; font-weight:bold;}

Comme pour le pseudo-élément :first-line, :first-letter a quelques restrictions sur les propriétés qui lui sont applicables. Voir CSS 2.1, 5.12.2 Le pseudo-élément :first-letter pour une liste de ces propriétés.

:before et :after

Parmi les aspects de CSS les plus polémiques, les pseudo-éléments :before et :after permettent l'insertion de contenu généré avant et après le contenu d'un élément.

Voici un exemple d'utilisation de :before (tiré de mon article Custom borders with advanced CSS) :

.cbb:before {
  content:"";
  display:block;
  height:17px;
  width:18px;
  background:url(top.png) no-repeat 0 0;
  margin:0 0 0 -18px;
}

Et un exemple d'utilisation de :after pour insérer l'URL d'un lien après son contenu texte :

a:link:after {content:" ("attr(href)")";}

Les problèmes d'Internet Explorer

Avant de mettre en pratique tout ce que vous avez appris sur les sélecteurs, gardez à l'esprit qu'Internet Explorer jusqu'à sa version 6 a un support incomplet des sélecteurs CSS 2.1. Les sélecteurs suivants ne sont pas supportés ou posent problème :

• Sélecteurs d'enfant
• Sélecteurs adjacents
• Sélecteurs d'attribut
• Sélecteurs de classes multiples
• Pseudo-classe :first-child
• Pseudo-classe de langue :lang
• Pseudo-éléments :before et :after
• Pseudo-classe :hover ne fonctionnant que sur les éléments a
• Pseudo-classe :focus non supportée. Pour les éléments a ayant le focus, c'est la pseudo-classe :active qui est en fait appliquée.

Fort heureusement, il semble qu'Internet Explorer 7 aura un support complet des sélecteurs CSS 2.1^[b]

Vous avez maintenant le pouvoir, à vous de l'utiliser correctement !

Et voilà ! Maintenant que vous savez tout sur les sélecteurs offerts par CSS 2.1, vous avez à votre disposition une foule de possibilités pour styler vos documents. Utilisez ces possibilités avec attention, pour garder un balisage concis et ordonné ainsi que pour améliorer l'accessiblité et l'utilisabilité. Ayez également une pensée pour les vieux navigateurs, dans lesquels les sélecteurs avancés ne fonctionneront pas…