Sélecteurs CSS

Cette traduction est en cours.

Dans CSS, les sélecteurs sont utilisés pour cibler les éléments HTML à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.

Prérequis : Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir CSS first steps.)
Objectif : Voir dans les détails comment les sélecteurs CSS fonctionnent.

Qu'est ce qu'un sélecteur ?

Vous les avez déjà rencontré : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.

Some code with the h1 highlighted.

Vous avez rencontrés plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments h1, ou la classe  .special.

En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la Level 3 Selectors specification, une spécification mature, la prise en charge par les navigateurs est donc complète.

Listes de sélecteurs

Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un h1 et pour une classe .special, je pourrais écrire deux règles :

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :

h1, .special { 
  color: blue; 
} 

L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :

h1, 
.special { 
  color: blue; 
} 

Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.

 

Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.

Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le h1 sera mis en forme comme prévu.

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni h1 ni les éléments de classe .special ne seront mis en forme.

h1, ..special { 
  color: blue; 
} 

Types de sélecteurs

On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation.Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.

Sélecteurs de type, de classe , et d'ID

Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <h1> :

h1 { }

On trouve aussi les sélecteurs ciblant une classe :

.box { }

ou une  ID:

#unique { }

Sélecteurs d'attribut

Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :

a[title] { }

Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :

a[href="https://example.com"] { }

Pseudo-classes et pseudo-éléments

Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe :hover sélectionne un élément seulement s'il est survolé par le pointeur de la souris :

a:hover { }

Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, ::first-line sélectionne la première ligne d'un texte contenu dans un élément (un <p> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre  <span>  et qu'après coup on appliquait un style sur cet élément.

p::first-line { }

Combinateurs

Dans la dernière catégorie, les sélecteurs combinent d'autres sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <article>  grâce au combinateur enfant (>) :

article > p { }

À faire ensuite

You can take a look at the reference table of selectors below for direct links to the various types of selectors in this Learn section or on MDN in general, or continue on to start your journey by finding out about type, class, and ID selectors.

Table de référence des sélecteurs

The below table gives you an overview of the selectors you have available to use, along with links to the pages in this guide which will show you how to use each type of selector. I have also included a link to the MDN page for each selector where you can check browser support information. You can use this as a reference to come back to when you need to look up selectors later in the material, or as you experiment with CSS generally.

Selector Example Learn CSS tutorial
Type selector h1 {  } Type selectors
Universal selector * {  } The universal selector
Class selector .box {  } Class selectors
id selector #unique { } ID selectors
Attribute selector a[title] {  } Attribute selectors
Pseudo-class selectors p:first-child { } Pseudo-classes
Pseudo-element selectors p::first-line { } Pseudo-elements
Descendant combinator article p Descendant combinator
Child combinator article > p Child combinator
Adjacent sibling combinator h1 + p Adjacent sibling
General sibling combinator h1 ~ p General sibling

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS