Sélecteurs CSS 2.1, partie 2publié le 10/10/2005 par Roger Johansson, traduit le 16/09/2009

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

Voici la deuxième des trois parties de cet article consacré aux 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.

Dans cette partie, je vais m'intéresser aux sélecteurs plus avancés, qui ne sont pas encore tous pleinement supportés dans les principaux navigateurs. Le support s'améliore cependant, et étudier les sélecteurs décrits dans cet article n'est pas du temps perdu.

Les combinateurs

Les combinateurs sont utilisés pour séparer deux sélecteurs simples ou plus, et former un sélecteur combiné. Les combinateurs disponibles sont les "blancs" (n'importe quel nombre de tabulations, d'espaces et autres caractères blancs), ">" et "+". Le rôle de chacun est décrit dans les prochaines sections.

Sélecteurs descendants

Un sélecteur descendant est construit de deux sélecteurs simples ou plus séparés par un blanc. Il cible les éléments qui sont des descendants d'un élément correspondant au premier sélecteur simple. Par exemple, le sélecteur de la règle suivante correspond à tous les éléments p qui sont des descendants d'un élément div :

div p {color:#F00;}

Un sélecteur descendant est constitué de sélecteurs simples pouvant être de tout type. Par exemple, le sélecteur suivant correspond à tous les éléments p ayant une classe info et qui sont contenus par un élément li, lui-même contenu par l'élément div ayant l'ID myid :

div#myid li p.info {color:#F00;}

Les sélecteurs descendants permettent de cibler des éléments sans pour autant leur donner une classe ou un ID, ce qui donne la possibilité de garder un code simple et clair. Admettons que l'on ait une navigation sous forme de liste constituée du code suivant :

<ul id="nav">
 <li><a href="#">Lien 1</a></li>
 <li><a href="#">Lien 2</a></li>
 <li><a href="#">Lien 3</a></li>
</ul>

Pour cibler uniquement les items et liens faisant partie de la liste de navigation, on peut utiliser le code CSS suivant :

#nav li {display:inline;}
#nav a {font-weight:bold;}

Ces règles n'affecteront pas les autres items de liste ou liens du document. Comparez ceci à l'attribution d'une classe à chaque item de liste et lien, et vous réaliserez à quel point votre code peut rester clair et concis grâce à l'utilisation des sélecteurs descendants.

Sélecteurs d'enfant

Un sélecteur d'enfant cible un descendant immédiat d'un élément donné. Ce sélecteur se compose de deux sélecteurs ou plus séparés par un signe "supérieur à" (">"). Le parent est à gauche du combinateur, et des espaces sont autorisés autour de ce dernier.

La règle suivante affectera tous les éléments strong qui sont des enfants d'un élément div :

div > strong {color:#F00;}

Seuls les éléments strong qui sont des descendants directs des éléments div correspondront à cette règle. Si n'importe quel élément se trouve entre div et strong dans l'arborescence du document, le sélecteur ne correspondra pas. Seul "Texte un" sera donc affecté par la règle précédente dans cet exemple :

<div>
 <strong>Texte un</strong>
 <p><strong>Texte deux</strong></p>
</div>

Sélecteurs adjacents

Un sélecteur adjacent est construit par deux sélecteurs simples séparés par un signe "plus" ("+"). Des espaces sont autorisés autour du combinateur. Ce sélecteur cible le second élément qui suit immédiatement le premier. Autrement dit, ces éléments doivent avoir le même parent et le premier élément (à gauche du combinateur) doit précéder immédiatement le second :

p + p {color:#F00;}

La règle ci-dessus appliquée à l'exemple suivant n'affectera que "Paragraphe 2" :

<div>
 <p>Paragraphe 1</p>
 <p>Paragraphe 2</p>
</div>

Regroupement

J'ai décidé de mentionner le regroupement ici, parce qu'une erreur commune que je vois les gens faire quand ils apprennent CSS est liée au regroupement de sélecteurs combinés.

Pour appliquer les mêmes règles à des éléments ciblés par des sélecteurs différents, il est possible de les regrouper en une liste et de les séparer par des virgules au lieu de répéter les déclarations pour chacun. L'erreur que beaucoup font est de ne pas lister les sélecteurs en entier. Supposons que nous ayons le code suivant :

<div id="news">
 <h3>News</h3>
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
 </ul>
</div>

Nous voulons alors appliquer les mêmes marges aux titres de niveau 3 et aux listes non ordonnées, mais uniquement si ils sont contenus dans l'élément div ayant pour ID news. Voici la mauvaise façon de procéder :

div#news h3, ul {margin:0 2em;}

Cette règle affectera bien les éléments h3 et ul contenu dans div#news. Le problème est que ceci s'appliquera également à tous les éléments ul du document, pas seulement ceux contenus dans div#news.

Voici la façon correcte de grouper les sélecteurs dans ce cas :

div#news h3, div#news ul {margin:0 2em;}

Quand vous groupez les sélecteurs, n'oubliez donc pas de spécifier chaque sélecteur dans son intégralité.

Les sélecteurs d'attribut

Les sélecteurs d'attribut ciblent les éléments en fonction de la présence d'attributs ou de leurs valeurs. Il existe quatre types de correspondance possibles :

[att]

Correspond à tout élément ayant un attribut att, quelle que soit sa valeur.

[att=val]

Correspond à tout élément dont l'attribut att contient exactement la valeur val.

[att~=val]

Correspond à tout élément dont l'attribut att contient une liste de valeurs séparées par des espaces et dont l'une d'elles est val. val ne peut alors contenir d'espaces.

[att|=val]

Correspond à tout élément dont l'attribut att contient une liste de valeurs séparées par des tirets débutant par val. L'usage principal concerne les codes de langue spécifiés par l'attribut lang (xml:lang en XHTML), par exemple "en", "en-us", "en-gb", etc.

Quelques exemples maintenant ! Le sélecteur dans la règle suivante correspond à tous les éléments p qui ont un attribut title, quelle que soit sa valeur :

p[title] {color:#F00;}

Dans l'exemple suivant, le sélecteur correspond à tous les éléments div qui ont un attribut class dont la valeur est error :

div[class=error] {color:#F00;}

Pour cibler tous les éléments td dont l'attribut headers contient la valeur col1, le sélecteur suivant peut être utilisé :

td[headers~=col1] {color:#F00;}

Pour finir, le sélecteur suivant cible tous les éléments p dont l'attribut lang commence par en :

p[lang|=en] {color:#F00;}

Des sélecteurs d'attribut multiples peuvent être employés sur un même sélecteur. Cela rend possible la correspondance sur différents attributs pour un même élément. La règle suivante s'appliquerait ainsi à tous les éléments blockquote qui ont un attribut class dont la valeur est exactement quote, et qui ont également un attribut cite (quelle que soit sa valeur) :

blockquote[class=quote][cite] {color:#F00;}

A suivre…

Et ceci nous amène à la fin de cette deuxième partie. Dans le toisième et dernier épisode de cette série, j'expliquerai les pseudo-classes et pseudo-éléments. En attendant, vous pouvez revoir la partie 1. La répétition est bonne pour l'apprentissage !