path: root/files/fr/css/premiers_pas/les_sélecteurs/index.html

---
title: Les sélecteurs
slug: CSS/Premiers_pas/Les_sélecteurs
tags:
  - CSS
  - 'CSS:Premiers_pas'
translation_of: Learn/CSS/Building_blocks/Selectors
translation_of_original: Web/Guide/CSS/Getting_started/Selectors
---
<p> </p>

<p>Cette page explique comment appliquer des styles de manière sélective, et les priorités des différents types de sélecteurs.</p>

<p>Vous ajouterez quelques attributs aux balises de votre document exemple, et vous utiliserez ces attributs dans votre feuille de style.</p>

<h3 id="Information_:_les_s.C3.A9lecteurs" name="Information_:_les_s.C3.A9lecteurs">Information : les sélecteurs</h3>

<p>CSS a sa propre terminologie pour décrire le langage CSS. Précédemment dans ce tutoriel, vous avez créé une ligne dans votre feuille de style comme ceci :</p>

<div style="width: 30em;">
<pre>strong {color: red;}
</pre>
</div>

<p>Dans la terminologie CSS, toute cette ligne est une <em>règle</em>. Cette règle commence avec <code>strong</code>, qui est un <em>sélecteur</em>. Celui-ci sélectionne les éléments dans le DOM sur lesquels la règle va s'appliquer.</p>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
 <caption>Plus de détails</caption>
 <tbody>
  <tr>
   <td>La partie à l'intérieur des crochets courbes est la <em>déclaration</em>.
    <p>Le mot-clé <code>color</code> est une <em>propriété</em>, et <code>red</code> est une <em>valeur</em>.</p>

    <p>Le point virgule après la valeur de propriété sépare celle-ci d'autres paires de propriétés/valeurs pour le même sélecteur.</p>

    <p>Ce tutoriel se réfère à un sélecteur comme <code>strong</code> comme à un sélecteur de <em>balise</em>. La spécification CSS s'y réfère comme à un sélecteur de <em>type</em>.</p>
   </td>
  </tr>
 </tbody>
</table>

<p><br>
 Cette page du tutoriel donne plus de détails sur les sélecteurs utilisables dans les règles CSS. Outre les noms de balise, il est possible d'utiliser des valeurs d'attribut dans les sélecteurs. Cela permet au règles d'être plus spécifiques.</p>

<p>Deux attributs ont un statut spécial pour CSS. Ce sont les attributs <code>class</code> et <code>id</code>.</p>

<p>Utilisez l'attribut <code>class</code> dans une balise pour lui assigner une classe nommée. Vous pouvez choisir le nom qui vous convient pour cette classe.</p>

<p>Dans votre feuille de style, entrez un point avant le nom de la classe lorsque vous l'utilisez dans un sélecteur.</p>

<p>Utilisez l'attribut <code>id</code> dans une balise pour lui assigner un identifiant unique. Vous pouvez choisir le nom qui vous convient pour l'identifiant. Celui-ci doit cependant être unique au sein du document.</p>

<p>Dans votre feuille de style, entrez un signe dièse (carré) avant l'identifiant lorsque vous l'utilisez dans un sélecteur.</p>

<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;">
 <caption>Exemples</caption>
 <tbody>
  <tr>
   <td>Cette balise HTML a à la fois un attribut <code>class</code> et un attribut <code>id</code> :
    <div style="width: 30em;">
    <pre>
&lt;P class="clef" id="principale"&gt;
</pre>
    </div>

    <p>L'identifiant, <code>principale</code>, doit être unique dans le document, mais d'autres balises dans le document peuvent avoir le même nom de classe, <code>clef</code>.</p>

    <p>Dans une feuille de style CSS, cette règle rend tous les éléments de la classe <code>clef</code> verts. (Ils peuvent ne pas tous être des éléments <small>P</small> .)</p>

    <div style="width: 30em;">
    <pre>
.clef {color: green;}
</pre>
    </div>

    <p>Cette règle rend l'élément avec l'identifiant <code>principale</code> gras :</p>

    <div style="width: 30em;">
    <pre>
#principale {font-weight: bolder;}
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>Si plus d'une règle s'applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique. Un sélecteur id est plus spécifique qu'un sélecteur de classe, qui lui-même est plus spécifique qu'un sélecteur de balise.</p>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
 <caption>Plus de détails</caption>
 <tbody>
  <tr>
   <td>Vous pouvez également combiner le sélecteurs, afin de créer un sélecteur plus spécifique.
    <p>Par exemple, le sélecteur <code>.clef</code> sélectionne tous les éléments qui ont le nom de classe <code>clef</code>. Le sélecteur <code>p.clef</code> sélectionne seulement les éléments P qui ont le nom de classe <code>clef</code>.</p>

    <p>Vous n'êtes pas limité aux deux attributs spéciaux <code>class</code> et <code>id</code>. Vous pouvez spécifier d'autres attributs en utilisant des crochets droits. Par exemple, le sélecteur <code>{{ mediawiki.external('type=button') }}</code> sélectionne tous les éléments qui ont un attribut <code>type</code> avec la valeur <code>button</code>.</p>

    <p>Une prochaine page de ce tutoriel, (<a href="/fr/CSS/Premiers_pas/Tableaux" title="fr/CSS/Premiers_pas/Tableaux">Tableaux</a>) a des informations sur les sélecteurs complexes basés sur les relations.</p>

    <p>Pour une information complète sur les sélecteurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> dans la spécification CSS.</p>
   </td>
  </tr>
 </tbody>
</table>

<p><br>
 Si la feuille de style a des règles conflictuelles et qui sont également spécifiques, alors CSS donne la priorité à la règle qui est définie plus tard dans la feuille de style.</p>

<p>Lorsque vous avez un problème de conflit de règles, essayez de le résoudre en rendant une des règles plus spécifique, afin qu'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez de déplacer l'une des règles plus près de la fin de la feuille de style pour lui donner la priorité.</p>

<h3 id="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id" name="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id">Action : utilisation des sélecteurs class et id</h3>

<p>Éditez votre fichier HTML, et dupliquez le paragraphe par copier-coller. Ajoutez ensuite des attributs id et class à la première copie, et un autre id à la seconde copie comme montré ci-dessous. Sinon, copiez et collez à nouveau l'entièreté du fichier :</p>

<div style="width: 48em; color: gray;">
<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt;Document exemple&lt;/TITLE&gt;
  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P <strong style="color: black;">id="premier"</strong>&gt;
      &lt;STRONG <strong style="color: black;">class="carotte"</strong>&gt;C&lt;/STRONG&gt;ascading
      &lt;STRONG <strong style="color: black;">class="epinard"</strong>&gt;S&lt;/STRONG&gt;tyle
      &lt;STRONG <strong style="color: black;">class="epinard"</strong>&gt;S&lt;/STRONG&gt;heets
    &lt;/P&gt;
    <strong style="color: black;">&lt;P id="second"&gt;
      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
    &lt;/P&gt;</strong>
  &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>

<p>Éditez à présent votre fichier CSS. Remplacez l'entièreté de son contenu par :</p>

<div style="width: 40em;">
<pre>strong {color: red;}
.carotte {color: orange;}
.epinard {color: green;}
#premier {font-style: italic;}
</pre>
</div>

<p>Actualisez dans votre navigateur et voyez le résultat :</p>

<table style="border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
  </tr>
  <tr>
   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
  </tr>
 </tbody>
</table>

<p>Vous pouvez essayer d'ordonner différemment les lignes dans votre fichier CSS pour constater que leur ordre n'a aucune importance.</p>

<p>Les sélecteurs de classe <code>.carotte</code> et <code>.epinard</code> ont priorité sur le sélecteur de balise <code>strong</code>.</p>

<p>Le sélecteur d'id <code>#premier</code> a priorité sur les sélecteurs de classe et de balise.</p>

<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;">
 <caption>Challenges</caption>
 <tbody>
  <tr>
   <td>Sans modifier votre fichier HTML, ajoutez une seule règle à votre fichier CSS qui garde la même couleur pour toutes les lettres initiales que précédemment, mais rend le reste du texte du second paragraphe bleu :
    <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
     <tbody>
      <tr>
       <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
      </tr>
      <tr>
       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
      </tr>
     </tbody>
    </table>

    <p>À présent, changez la règle que vous venez d'ajouter (sans rien changer d'autre), pour rendre le premier paragraphe bleu également :</p>

    <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
     <tbody>
      <tr>
       <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
      </tr>
      <tr>
       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<p> </p>

<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>

<p>Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Les_sélecteurs" title="Talk:fr/CSS/Premiers_pas/Les_sélecteurs">page de discussion</a>.</p>

<p>Votre feuille de style d'exemple commence à avoir l'air dense et compliquée. La page suivante décrit des façons de rendre CSS plus facile à lire : <strong><a href="/fr/docs/CSS/Premiers_pas/Des_CSS_lisibles" title="fr/CSS/Premiers_pas/Des_CSS_lisibles">Des CSS lisibles</a></strong></p>