Sélecteurs CSS de base

Qu'est-ce qu'un sélecteur ?

Un sélecteur CSS est la première partie d'une règle CSS. Il s'agit d'un motif d'éléments et d'autres termes qui indiquent au navigateur quels éléments HTML doivent recevoir les valeurs de propriétés CSS définies dans la règle. L'élément ou les éléments sélectionnés par le sélecteur sont appelés le sujet du sélecteur.

Dans les articles précédents, vous avez rencontré différents sélecteurs et appris qu'il existe des sélecteurs qui ciblent le document de différentes manières ; par exemple, en sélectionnant un élément comme h1, ou une classe comme .special. Commençons par récapituler les principaux que vous avez déjà vus.

Sélecteur de type

Un sélecteur de type est parfois appelé sélecteur de nom de balise ou sélecteur d'élément car il sélectionne une balise/un élément HTML dans votre document. Dans l'exemple ci-dessous, nous avons utilisé les sélecteurs span, em et strong.

Essayez de modifier l'exemple suivant (cliquez sur « Exécuter » pour l'ouvrir dans le MDN Playground) afin d'ajouter une règle CSS qui sélectionne l'élément <h1> et change sa couleur en bleu :

<h1>Sélecteurs de type</h1>
<p>
  Les légumes sont un bonus pour vous, donc vous devez en manger plus
  <span>chou-rave oignon gallois</span> daikon amarante tatsoi tomatillo melon
  haricot azuki ail.
</p>

<p>
  Bette à carde gombo maïs soko <strong>endive</strong> courge. Persil échalote
  courgette tatsoi pois germes fève chou cavalier pissenlit gombo wakamé tomate.
  Pissenlit concombre pois de terre cacahuète soko courgette.
</p>

<p>
  Feuilles de navet achillée haricot riz rutabaga <em>endive chou-fleur</em>
  laitue de mer chou-rave amarante épinard d'eau avocat daikon chou napa asperge
  pourpier d'hiver chou frisé. Céleri pomme de terre oignon vert raisin du
  désert raifort épinard
</p>

body {
  font-family: sans-serif;
}

span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

Sélecteurs de classe

Le sélecteur de classe, sensible à la casse, commence par un point (.). Il sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple interactif ci-dessous, nous avons créé une classe appelée highlight et l'avons appliquée à plusieurs endroits du document. Tous les éléments ayant cette classe sont mis en évidence.

<h1 class="highlight">Sélecteurs de classe</h1>
<p>
  Les légumes sont un bonus pour vous, donc vous devez en manger plus
  <span class="highlight">chou-rave oignon gallois</span> daikon amarante tatsoi
  tomatillo melon haricot azuki ail.
</p>

<p class="highlight">
  Bette à carde gombo maïs soko <strong>endive</strong> courge. Persil échalote
  courgette tatsoi pois germes fève chou cavalier pissenlit gombo wakamé tomate.
  Pissenlit concombre pois de terre cacahuète soko courgette.
</p>

body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}

Jouer avec les sélecteurs de classe

Essayez de modifier l'exemple ci-dessus (en utilisant le MDN Playground) pour effectuer les changements suivants :

1. Modifiez le HTML pour changer le contenu auquel les styles .highlight sont appliqués. Vous pouvez, par exemple, ajouter des éléments <span> pour entourer différentes parties du contenu existant et leur appliquer la classe highlight, retirer certaines classes highlight existantes, ou ajouter du nouveau contenu auquel appliquer la classe highlight.
2. Modifiez le CSS pour changer les déclarations à l'intérieur de la règle .highlight, en ajoutant de nouvelles si vous le souhaitez, et observez comment cela affecte la mise en forme de tous les éléments ayant la classe highlight.
3. Créez une nouvelle règle de classe dans le CSS avec des déclarations différentes (par exemple, avec un sélecteur .highlight2), puis essayez de l'appliquer à une partie de votre HTML.

Cibler des classes d'un élément donné

Vous pouvez créer un sélecteur qui ciblera des éléments spécifiques ayant la classe appliquée. Dans l'exemple suivant, nous allons mettre en surbrillance un <span> avec la classe highlight différemment d'un titre <h1> avec la classe highlight. Nous faisons cela en utilisant le sélecteur de type pour l'élément à cibler, avec la classe ajoutée à l'aide d'un point, sans espace entre les deux.

<h1 class="highlight">Sélecteurs de classe</h1>
<p>
  Les légumes sont un bonus pour vous, donc vous devez en manger plus
  <span class="highlight">chou-rave oignon gallois</span> daikon amarante tatsoi
  tomatillo melon haricot azuki ail.
</p>

<p class="highlight">
  Bette à carde gombo maïs soko <strong>endive</strong> courge. Persil échalote
  courgette tatsoi pois germes fève chou cavalier pissenlit gombo wakamé tomate.
  Pissenlit concombre pois de terre cacahuète soko courgette.
</p>

body {
  font-family: sans-serif;
}

span.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}

Cette approche réduit la portée d'une règle. La règle ne s'appliquera qu'à cette combinaison particulière d'élément et de classe. Vous devrez ajouter un autre sélecteur si vous souhaitez que la règle s'applique à d'autres éléments.

Cibler un élément appartenant à plus d'une classe

Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.

L'exemple ci-dessous présente trois <div> contenant chacun une note. Si la boîte est dans la classe notebox elle a une bordure grise. Si de plus elle est dans la classe warning ou danger, on change la border-color.

Nous pouvons indiquer au navigateur que nous voulons cibler l'élément uniquement s'il possède deux classes appliquées, en les enchaînant sans espace entre elles. Vous verrez que le dernier <div> ne reçoit aucun style, car il n'a que la classe danger. Pour que des styles lui soient appliqués, il doit aussi avoir la classe notebox.

<div class="notebox">Ceci est une note d'information.</div>

<div class="notebox warning">Cette note affiche un avertissement.</div>

<div class="notebox danger">Cette note affiche un danger&nbsp;!</div>

<div class="danger">
  Ceci ne sera pas mis en forme — il faut aussi la classe notebox
</div>

body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

Sélecteurs d'ID

Un sélecteur d'ID commence par un # plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'id associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :

<h1 id="heading">Sélecteur d'ID</h1>
<p>
  Les légumes sont un bonus pour vous, donc vous devez en manger plus chou-rave
  oignon gallois daikon amarante tatsoi tomatillo melon haricot azuki ail.
</p>

<p id="one">
  Bette à carde gombo maïs soko <strong>endive</strong> courge. Persil échalote
  courgette tatsoi pois germes fève chou cavalier pissenlit gombo wakamé tomate.
  Pissenlit concombre pois de terre cacahuète soko courgette.
</p>

body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}

Jouer avec les sélecteurs d'ID

Essayez de modifier l'exemple ci-dessus pour effectuer les changements suivants :

1. Modifiez le HTML pour appliquer les styles de #one au premier paragraphe plutôt qu'au second.
2. Modifiez le CSS pour changer les déclarations à l'intérieur des sélecteurs d'ID, et observez comment cela modifie l'apparence du HTML.

Résumé

Dans cet article, nous avons récapitulé les sélecteurs CSS, qui vous permettent de cibler des éléments HTML particuliers, en examinant les sélecteurs de type, de classe et d'ID un peu plus en détail que précédemment. Dans le prochain article, nous aborderons les sélecteurs d'attributs.

Voir aussi

Classes CSS ^(angl.), Scrimba ^{Partenaire d'apprentissage MDN}

Une leçon interactive qui fournit des conseils sur les classes CSS.

• Précédent
• Aperçu : Composer le HTML avec les CSS
• Suivant