Sur cette page :

1. Les sélecteurs et les combinaisons
   1. Sélection par nature d’élément, identifiant et classe
   2. Le sélecteur universel
   3. Les sélecteurs combinés
      1. Éléments descendants
      2. Éléments fils
      3. Éléments adjacents

14.1# Sélection par nature d’élément, identifiant et classe

Les sélecteurs en CSS sont très puissants, mais malheureusement, avant la version 7 d’internet explorer, leur support est très incomplet pour cette famille de navigateurs. Nous avons vu plus tôt le sélecteur par élément, celui-ci permet d’appliquer des styles à la totalité des éléments du même type. Il est possible de sélectionner toute balise HTML (et XML).

L’attribut HTML id d’un élément permet de l’identifier de manière unique, en CSS, on peut sélectionner cet élément en préfixant cet identifiant par le caractère # :

<p id="introduction">Ceci est une introduction</p>

#introduction { color: #00FF00; }
/* le texte du paragraphe d'introduction sera en vert */

Il est également possible de définir des classes d’éléments, c’est à dire un ensemble d’éléments (indépendamment de la balise) portant le même sens. Par exemple, il est très courant de définir les classes warning et error qui peuvent s’appliquer à de nombreux éléments, comme un paragraphe ou un champ de formulaire. En HTML, une classe est définie à l’aide de l’attribut class, en CSS, le nom d’une classe est préfixée par . (le point).

Vous l’aurez compris, un identifiant doit être appliqué à un seul élément d’une page, tandis que la classe peut être appliquée à un nombre quelconque.

<p class="error">Vous devez remplir ce champ</p>
<p class="warning">Attention : cette suppression est définitive.</p>

.error { color: #FF0000; } /* les erreurs sont affichées en rouge */
.warning { color: #FF9900; } /* les alertes sont affichées en orange */

Il est possible de sélectionner des éléments à condition que ceux-ci répondent à plusieurs critères. Par exemple, p#head ou ul.infos.important signifient respectivement “sélectionner les éléments <p> portant l’identifiant head” et “sélectionner les éléments <ul> portant la classe infos et la classe important”.

Ce sélecteur fonctionne correctement avec la plupart des navigateurs.

• supporté
• supporté
• supporté
• supporté
• supporté

14.2# Le sélecteur universel

En CSS, il existe un sélecteur universel qui désigne la totalité des éléments de la page : l’astérisque *. Une technique répandue consiste à utiliser cet élément pour annuler certains styles par défaut des navigateurs, en particulier les marges.

14.3# Les sélecteurs combinés

Il est possible de concevoir des combinaisons de sélecteurs, afin de naviguer dans l’arbre des éléments HTML.

14.3.1# Éléments descendants

Plusieurs sélecteurs séparés par des espaces (selecteurA selecteurB) correspondent à la sélection d’éléments descendants, par exemple #contenu div.article p sélectionne l’ensemble des éléments <p> contenu dans des éléments <div> de la classe article, eux-même situés dans l’élément portant l’identifiant contenu.

• supporté
• supporté
• supporté
• supporté
• supporté

14.3.2# Éléments fils

La syntaxe du selecteur sélecteurA > sélecteurB permet d’appliquer une règle sur l’ensemble des éléments sélectionnés par sélecteurB enfants de sélecteursA. Dans l’exemple suivant :

<div id="contenu">
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<div class="note">
  <p>Paragraphe 3</p>
  <p>Paragraphe 4</p>
</div>
</div>

Les éléments sélectionnés par div#contenu > p sont les deux premiers paragraphes. Les deux derniers n’étant pas des enfants mais des descendants indirects de l’élement div#contenu.

• supporté
• À partir de la version 7
• supporté
• supporté
• supporté

14.3.3# Éléments adjacents

Le sélecteur adjacent répond à la syntaxe SelecteurA + SelecteurB. Ceci permet de sélectionner les éléments sélectionnés par SelecteurB si ceux-ci suivent un élément sélectionné par SelecteurA. Deux éléments adjacents sont sur le même nœud (ils possède le même parent) et se suivent :

/* Le paragraphe suivant une image sera en italique */
img + p { font-style: italic; }

<div>
  <p>Voici une image :</p>
  <img src="./image.png" alt="description alternative de l'image" />
  <p>Image 1 : ceci est une légende est sera affiché en italique.</p>
  <p>Voilà, vous avez vu une image et sa légende !</p>
</div>
<div>
  <img src="./image2.png" alt="un autre texte" />
</div>
<p>Ce paragraphe n'est pas adjacent à l'image n°2, puisque les deux éléments n'ont pas le même père.</p>

Dans cet exemple, seul le second paragraphe sera en italique.

• supporté
• À partir de la version 7
• supporté
• supporté
• supporté