+---

+title: Combinateurs

+slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs

+tags:

+ - CSS

+ - Sélecteurs

+ - combinateurs

+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators

+---

+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>

+

+<p>Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.</p>

+

+<table class="learn-box standard-table">

+ <tbody>

+ <tr>

+ <th scope="row">Prérequis:</th>

+ <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td>

+ </tr>

+ <tr>

+ <th scope="row">Objectif:</th>

+ <td>En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Combinateur_descendant">Combinateur descendant</h2>

+

+<p>Le <strong>combinateur descendant</strong>— en général représenté par un seul espace (<code> </code>) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.</p>

+

+<pre class="brush: css notranslate">body article p

+</pre>

+

+<p>Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <code>&lt;p&gt;</code>, qui est à l'intérieur d'un élément de classe <code>.box</code>.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>

+

+<h2 id="Combinateur_enfant">Combinateur enfant</h2>

+

+<p>Le combinateur enfant (<code>&gt;</code>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <code>&lt;p&gt;</code> qui sont des enfants directs des éléments <code>&lt;article&gt;</code>:</p>

+

+<pre class="brush: css notranslate">article &gt; p</pre>

+

+<p>Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <code>&lt;li&gt;</code> qui sont un enfant direct d'un <code>&lt;ul&gt;</code>, et leur ai donné une bordure supérieure.</p>

+

+<p>si vous supprimez le <code>&gt;</code> qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <code>&lt;li&gt;</code> auront une bordure rouge.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>

+

+<h2 id="Combinateur_frère_adjacents">Combinateur frère adjacents</h2>

+

+<p>Le sélecteur de frère adjacent (<code>+</code>) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <code>&lt;img&gt;</code> qui viennent juste après les éléments <code>&lt;p&gt;</code>:</p>

+

+<pre class="brush: css notranslate">p + img</pre>

+

+<p>Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <code>&lt;h1&gt;</code>, et le stylisons.</p>

+

+<p>Si vous insérez un autre élément tel qu'un <code>&lt;h2&gt;</code> entre le <code>&lt;h1&gt;</code> et le <code>&lt;p&gt;</code>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>

+

+<h2 id="Combinateur_général_de_frères">Combinateur général de frères</h2>

+

+<p>Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (<code>~</code>). Pour sélectionner tous les éléments <code>&lt;img&gt;</code> qui viennent n'importe où après les éléments <code>&lt;p&gt;</code>, nous ferions ceci:</p>

+

+<pre class="brush: css notranslate">p ~ img</pre>

+

+<p>Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <code>&lt;p&gt;</code> qui viennent après le <code>&lt;h1&gt;</code>, et même s'il y a aussi un <code>&lt;div&gt;</code> dans le document, le <code>&lt;p&gt;</code> qui vient après qu'il est sélectionné.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>

+

+<h2 id="Utilisation_de_combinateurs">Utilisation de combinateurs</h2>

+

+<p>Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <code>&lt;ul&gt;</code>, je pourrais utiliser ce qui suit.</p>

+

+<pre class="brush: css notranslate">ul &gt; li[class="a"] { }</pre>

+

+<p>Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.</p>

+

+<p>Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.</p>

+

+<h2 id="Testez_vos_compétences!">Testez vos compétences!</h2>

+

+<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p>

+

+<h2 id="Passer_à_la_suite">Passer à la suite</h2>

+

+<p>Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le <a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">modèle de Boîte</a>.</p>

+

+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>

+

+<h2 id="Dans_ce_module">Dans ce module</h2>

+

+<ol>

+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li>

+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>

+ <ul>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li>

+ <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a></li>

+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments">Pseudo-classes and pseudo-élements</a></li>

+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs">Combinateurs</a></li>

+ </ul>

+ </li>

+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">Le modèle de Boîte</a></li>

+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li>

+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li>

+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content">Débordement de contenu</a></li>

+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">Valeurs et unités</a></li>

+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Taille des élements</a></li>

+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li>

+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li>

+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li>

+ <li><a href="/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li>

+</ol>

+---

+title: Sélecteurs CSS

+slug: Apprendre/CSS/Building_blocks/Selectors

+translation_of: Learn/CSS/Building_blocks/Selectors

+---

+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>

+

+<p class="summary">Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("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.</p>

+

+<table class="learn-box standard-table">

+ <tbody>

+ <tr>

+ <th scope="row">Prérequis :</th>

+ <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>

+ </tr>

+ <tr>

+ <th scope="row">Objectif :</th>

+ <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Quest_ce_quun_sélecteur">Qu'est ce qu'un sélecteur ?</h2>

+

+<p>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 <em>sujet </em>de ce sélecteur.</p>

+

+<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>

+

+<p>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 <code>h1</code>, ou la classe  <code>.special</code>.</p>

+

+<p>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 <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, une spécification mature, la prise en charge par les navigateurs est donc complète.</p>

+

+<h2 id="Listes_de_sélecteurs">Listes de sélecteurs</h2>

+

+<p>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 <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p>

+

+<pre class="brush: css notranslate"><code>h1 {

+ color: blue;

+}

+

+.special {

+ color: blue;

+} </code></pre>

+

+<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p>

+

+<pre class="brush: css notranslate"><code>h1, .special {

+ color: blue;

+} </code></pre>

+

+<p>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 :</p>

+

+<pre class="brush: css notranslate"><code>h1,

+.special {

+ color: blue;

+} </code></pre>

+

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

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>

+

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

+

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

+

+<pre class="brush: css notranslate"><code>h1 {

+ color: blue;

+}

+

+..special {

+ color: blue;

+} </code></pre>

+

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

+

+<pre class="brush: css notranslate"><code>h1, ..special {

+ color: blue;

+} </code></pre>

+

+<h2 id="Types_de_sélecteurs">Types de sélecteurs</h2>

+

+<p>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.</p>

+

+<h3 id="Sélecteurs_de_type_de_classe_et_dID">Sélecteurs de type, de classe , et d'ID</h3>

+

+<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code>&lt;h1&gt;</code> :</p>

+

+<pre class="brush: css notranslate">h1 { }</pre>

+

+<p>On trouve aussi les sélecteurs ciblant une classe :</p>

+

+<pre class="brush: css notranslate">.box { }</pre>

+

+<p>ou une  ID :</p>

+

+<pre class="brush: css notranslate">#unique { }</pre>

+

+<h3 id="Sélecteurs_dattribut">Sélecteurs d'attribut</h3>

+

+<p>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é :</p>

+

+<pre class="brush: css notranslate">a[title] { }</pre>

+

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

+

+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>

+

+<h3 id="Pseudo-classes_et_pseudo-éléments">Pseudo-classes et pseudo-éléments</h3>

+

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

+

+<pre class="brush: css notranslate">a:hover { }</pre>

+

+<p>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, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code>&lt;p&gt;</code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre  <code>&lt;span&gt;</code>  et qu'après coup on appliquait un style sur cet élément.</p>

+

+<pre class="brush: css notranslate">p::first-line { }</pre>

+

+<h3 id="Combinateurs">Combinateurs</h3>

+

+<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code>&lt;article&gt;</code>  grâce au combinateur enfant (<code>&gt;</code>) :</p>

+

+<pre class="brush: css notranslate">article &gt; p { }</pre>

+

+<h2 id="À_faire_ensuite">À faire ensuite</h2>

+

+<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ;  vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">sélecteurs de type, de classe, et d'ID</a>.</p>

+

+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>

+

+<h2 id="Table_de_référence_des_sélecteurs">Table de référence des sélecteurs</h2>

+

+<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous  rechercherez des informations sur les sélecteurs.</p>

+

+<table class="standard-table">

+ <thead>

+ <tr>

+ <th scope="col">Sélecteur</th>

+ <th scope="col">Exemple</th>

+ <th scope="col">Tutoriel CSS</th>

+ </tr>

+ </thead>

+ <tbody>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a></td>

+ <td><code>h1 {  }</code></td>

+ <td><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">Sélecteurs de type</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a></td>

+ <td><code>* {  }</code></td>

+ <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a></td>

+ <td><code>.box {  }</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d'ID</a></td>

+ <td><code>#unique { }</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></td>

+ <td><code>a[title] {  }</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td>

+ </tr>

+ <tr>

+ <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td>

+ <td><code>p:first-child { }</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>

+ </tr>

+ <tr>

+ <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td>

+ <td><code>p::first-line { }</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur descendant</a></td>

+ <td><code>article p</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur enfant</a></td>

+ <td><code>article &gt; p</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Combinateur_de_voisin_direct">Sélecteur de frére adjacent</a></td>

+ <td><code>h1 + p</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td>

+ </tr>

+ <tr>

+ <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de frère général</a></td>

+ <td><code>h1 ~ p</code></td>

+ <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Dans_ce_module">Dans ce module</h2>

+

+<ol>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>

+ <ul>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>

+ </ul>

+ </li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>

+</ol>

+---

+title: Pseudo-classes et pseudo-éléments

+slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments

+tags:

+ - Apprendre

+ - CSS

+ - Débutant

+ - Pseudo

+ - Pseudo-class

+ - Pseudo-element

+ - Sélecteurs

+translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

+---

+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

+

+<p>Voyons maintenant les sélecteurs de<span> <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</span></p>

+

+<table class="learn-box standard-table">

+ <tbody>

+ <tr>

+ <th scope="row">Prérequis :</th>

+ <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>

+ </tr>

+ <tr>

+ <th scope="row">Objectif :</th>

+ <td>Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Quest_ce_quune_pseudo-classe">Qu'est ce qu'une pseudo-classe ?</h2>

+

+<p>Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.</p>

+

+<p>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p>

+

+<pre class="notranslate">:<em>pseudo-class-name</em></pre>

+

+<h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3>

+

+<p>Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>

+

+<p>Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible <em>dans tous les cas</em> le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)</p>

+

+<p>{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>

+

+<p>Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :</p>

+

+<ul>

+ <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li>

+ <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li>

+ <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li>

+</ul>

+

+<h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3>

+

+<p>Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées <em>pseudo-classes dynamiques</em>, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :</p>

+

+<p><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br>

+ <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>

+

+<h2 id="Quest_ce_quun_pseudo-élément">Qu'est ce qu'un pseudo-élément ?</h2>

+

+<p>Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points <code>::</code>.</p>

+

+<pre class="notranslate"><em>::pseudo-element-name</em></pre>

+

+<div class="blockIndicator note">

+<p><strong>Note </strong>: Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p>

+</div>

+

+<p>Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément &lt;span&gt; et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.</p>

+

+<p>Le pseudo-sélecteur d'éléments <code>::first-line</code>  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>

+

+<p>Il agit comme si un <code>&lt;span&gt;</code> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.</p>

+

+<p>Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.</p>

+

+<h2 id="Combiner_pseudo-classes_et_pseudo-éléments">Combiner pseudo-classes et pseudo-éléments</h2>

+

+<p>Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs <code>:first-child</code> et <code>::first-line</code> Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <code>&lt;p&gt;</code>, qui se trouve à l'intérieur d'un élément <code>&lt;article&gt;</code></p>

+

+<pre class="brush: css notranslate"><code>article p:first-child::first-line {

+ font-size: 120%;

+ font-weight: bold;

+}</code></pre>

+

+<h2 id="Générer_du_contenu_avec_before_et_after">Générer du contenu avec ::before et ::after</h2>

+

+<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/en-US/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p>

+

+<p>Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément <code>::before</code> en  <code>::after</code> et voir le texte inséré à la fin de l'élément au lieu du début.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>

+

+<p>L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.</p>

+

+<p>Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>

+

+<p>Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.</p>

+

+<p>Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément <code>::before</code> pseudo-element. Nous l'avons défini en <code>display: block</code> afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>

+

+<p>L'utilisation des pseudo-éléments <code>::before</code> et <code>::after</code> avec la propriété <code>content</code> est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.</p>

+

+<h2 id="Section_de_référence">Section de référence</h2>

+

+<p>Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.</p>

+

+<h3 id="Pseudo-classes">Pseudo-classes</h3>

+

+<table class="standard-table">

+ <thead>

+ <tr>

+ <th scope="col">Sélecteur</th>

+ <th scope="col">Description</th>

+ </tr>

+ </thead>

+ <tbody>

+ <tr>

+ <td>{{ Cssxref(":active") }}</td>

+ <td>Matches when the user activates (for example clicks on) an element.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":any-link") }}</td>

+ <td>Matches both the <code>:link</code> and <code>:visited</code> states of a link.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":blank") }}</td>

+ <td>Matches an <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code> element</a> whose input value is empty.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":checked") }}</td>

+ <td>Matches a radio button or checkbox in the selected state.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":current") }}</td>

+ <td>Matches the element, or an ancestor of the element, that is currently being displayed.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":default") }}</td>

+ <td>Matches the one or more UI elements that are the default among a set of similar elements.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":dir") }}</td>

+ <td>Select an element based on its directionality (value of the HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> property).</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":disabled") }}</td>

+ <td>Matches user interface elements that are in an disabled state.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":empty") }}</td>

+ <td>Matches an element that has no children except optionally white space.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":enabled") }}</td>

+ <td>Matches user interface elements that are in an enabled state.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":first") }}</td>

+ <td>In <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":first-child") }}</td>

+ <td>Matches an element that is first among its siblings.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":first-of-type") }}</td>

+ <td>Matches an element which is first of a certain type among its siblings.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":focus") }}</td>

+ <td>Matches when an element has focus.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":focus-visible")}}</td>

+ <td>Matches when an element has focus and the focus should be visible to the user.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":focus-within") }}</td>

+ <td>Matches an element with focus plus an element with a descendent that has focus.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":future") }}</td>

+ <td>Matches the elements after the current element.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":hover") }}</td>

+ <td>Matches when the user hovers over an element.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":indeterminate") }}</td>

+ <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":in-range") }}</td>

+ <td>Matches an element with a range when its value is in-range.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":invalid") }}</td>

+ <td>Matches an element, such as an <code>&lt;input&gt;</code>, in an invalid state.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":lang") }}</td>

+ <td>Matches an element based on language (value of the HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":last-child") }}</td>

+ <td>Matches an element which is last among its siblings.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":last-of-type") }}</td>

+ <td>Matches an element of a certain type that is last among its siblings.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":left") }}</td>

+ <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":link")}}</td>

+ <td>Matches unvisited links.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":local-link")}}</td>

+ <td>Matches links pointing to pages that are in the same site as the current document.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":is", ":is()")}}</td>

+ <td>Matches any of the selectors in the selector list that is passed in.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":not") }}</td>

+ <td>Matches things not matched by selectors that are passed in as a value to this selector.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":nth-child") }}</td>

+ <td>Matches elements from a list of siblings — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":nth-of-type") }}</td>

+ <td>Matches elements from a list of siblings that are of a certain type (e.g. <code>&lt;p&gt;</code> elements) — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":nth-last-child") }}</td>

+ <td>Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":nth-last-of-type") }}</td>

+ <td>Matches elements from a list of siblings that are of a certain type (e.g. <code>&lt;p&gt;</code> elements), counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":only-child") }}</td>

+ <td>Matches an element that has no siblings.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":only-of-type") }}</td>

+ <td>Matches an element that is the only one of its type among its siblings.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":optional") }}</td>

+ <td>Matches form elements that are not required.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":out-of-range") }}</td>

+ <td>Matches an element with a range when its value is out of range.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":past") }}</td>

+ <td>Matches the elements before the current element.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":placeholder-shown") }}</td>

+ <td>Matches an input element that is showing placeholder text.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":playing") }}</td>

+ <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":paused") }}</td>

+ <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":read-only") }}</td>

+ <td>Matches an element if it is not user-alterable.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":read-write") }}</td>

+ <td>Matches an element if it is user-alterable.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":required") }}</td>

+ <td>Matches form elements that are required.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":right") }}</td>

+ <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":root") }}</td>

+ <td>Matches an element that is the root of the document.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":scope") }}</td>

+ <td>Matches any element that is a scope element.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":valid") }}</td>

+ <td>Matches an element such as an <code>&lt;input&gt;</code> element, in a valid state.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":target") }}</td>

+ <td>Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment</a>).</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref(":visited") }}</td>

+ <td>Matches visited links.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h3 id="Pseudo-éléments">Pseudo-éléments</h3>

+

+<table class="standard-table">

+ <thead>

+ <tr>

+ <th scope="col">Sélecteur</th>

+ <th scope="col">Description</th>

+ </tr>

+ </thead>

+ <tbody>

+ <tr>

+ <td>{{ Cssxref("::after") }}</td>

+ <td>Matches a stylable element appearing after the originating element's actual content.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref("::before") }}</td>

+ <td>Matches a stylable element appearing before the originating element's actual content.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref("::first-letter") }}</td>

+ <td>Matches the first letter of the element.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref("::first-line") }}</td>

+ <td>Matches the first line of the containing element.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref("::grammar-error") }}</td>

+ <td>Matches a portion of the document containing a grammar error as flagged by the browser.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref("::selection") }}</td>

+ <td>Matches the portion of the document that has been selected.</td>

+ </tr>

+ <tr>

+ <td>{{ Cssxref("::spelling-error") }}</td>

+ <td>Matches a portion of the document containing a spelling error as flagged by the browser.</td>

+ </tr>

+ </tbody>

+</table>

+

+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

+

+<h2 id="Dans_ce_cours">Dans ce cours</h2>

+

+<ol>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>

+ <ul>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>

+ </ul>

+ </li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>

+</ol>

+---

+title: Sélecteurs d'attribut

+slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut

+tags:

+ - Apprendre

+ - Attribut

+ - CSS

+ - Débutant

+ - Sélecteurs

+translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors

+---

+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>

+

+<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p>

+

+<table class="learn-box standard-table">

+ <tbody>

+ <tr>

+ <th scope="row">Prérequis :</th>

+ <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>

+ </tr>

+ <tr>

+ <th scope="row">Objectif :</th>

+ <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2>

+

+<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p>

+

+<table class="standard-table">

+ <thead>

+ <tr>

+ <th scope="col">Sélecteur</th>

+ <th scope="col">Exemple</th>

+ <th scope="col">Description</th>

+ </tr>

+ </thead>

+ <tbody>

+ <tr>

+ <td><code>[<em>attr</em>]</code></td>

+ <td><code>a[title]</code></td>

+ <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td>

+ </tr>

+ <tr>

+ <td><code>[<em>attr</em>=<em>value</em>]</code></td>

+ <td><code>a[href="https://example.com"]</code></td>

+ <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td>

+ </tr>

+ <tr>

+ <td><code>[<em>attr</em>~=<em>value</em>]</code></td>

+ <td><code>p[class~="special"]</code></td>

+ <td>

+ <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p>

+

+ <p>Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.</p>

+ </td>

+ </tr>

+ <tr>

+ <td><code>[<em>attr</em>|=<em>value</em>]</code></td>

+ <td><code>div[lang|="zh"]</code></td>

+ <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td>

+ </tr>

+ </tbody>

+</table>

+

+<p>Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :</p>

+

+<ul>

+ <li>Avec <code>li[class]</code> on cible tout élément <code>&lt;li&gt;</code> possédant un attribut <code>class</code>. On cible ainsi tous les list items sauf le premier.</li>

+ <li><code>li[class="a"]</code> cible les <code>&lt;li&gt;</code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code>&lt;li&gt;</code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li>

+ <li><code>li[class~="a"]</code> cible tout élément <code>&lt;li&gt;</code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li>

+</ul>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>

+

+<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2>

+

+<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes  <code>box-warning</code> et <code>box-error</code>,  vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p>

+

+<table class="standard-table">

+ <thead>

+ <tr>

+ <th scope="col">Sélecteur</th>

+ <th scope="col">Exemple</th>

+ <th scope="col">Description</th>

+ </tr>

+ </thead>

+ <tbody>

+ <tr>

+ <td><code>[<em>attr</em>^=<em>value</em>]</code></td>

+ <td><code>li[class^="box-"]</code></td>

+ <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td>

+ </tr>

+ <tr>

+ <td><code>[<em>attr</em>$=<em>value</em>]</code></td>

+ <td><code>li[class$="-box"]</code></td>

+ <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td>

+ </tr>

+ <tr>

+ <td><code>[<em>attr</em>*=value<em> </em>]</code></td>

+ <td><code>li[class*="box"]</code></td>

+ <td>élément sélectionné quand la<br>

+ la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td>

+ </tr>

+ </tbody>

+</table>

+

+<p>L'exemple suivant montre ces sélecteurs en action :</p>

+

+<ul>

+ <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li>

+ <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li>

+ <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelquepart un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li>

+</ul>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>

+

+<h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2>

+

+<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant la parenthèse fermante. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p>

+

+<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>

+

+<div class="blockIndicator note">

+<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>

+</div>

+

+<h2 id="À_faire_vous-mêmes">À faire vous-mêmes</h2>

+

+<p>Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :</p>

+

+<ul>

+ <li>Cibler l'élément <code>&lt;a&gt;</code> ayant un attribut <code>title</code> et colorer sa bordure en rose (<code>border-color: pink</code>).</li>

+ <li>Cibler l'élément <code>&lt;a&gt;</code> dont l'attribut <code>href</code> contient le mot <code>contact</code> quelque part dans sa valeur et colorer sa bordure en orange (<code>border-color: orange</code>).</li>

+ <li>Cibler l'élément <code>&lt;a&gt;</code> dont la valeur <code>href</code> commence par <code>https</code> et colorer sa bordure en vert (<code>border-color: green</code>).</li>

+</ul>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p>

+

+<div class="blockIndicator note">

+<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> —  mais essayez d'abord de la trouver par vous-même !</p>

+</div>

+

+<h2 id="Pas_suivants">Pas suivants</h2>

+

+<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p>

+

+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>

+

+<h2 id="Dans_ce_cours">Dans ce cours</h2>

+

+<ol>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>

+ <ul>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>

+ </ul>

+ </li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>

+</ol>

+---

+title: 'Sélecteurs de type, de classe et d''ID'

+slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID

+translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors

+---

+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>

+

+<p>Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.</p>

+

+<table class="learn-box standard-table">

+ <tbody>

+ <tr>

+ <th scope="row">Prérequis :</th>

+ <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>

+ </tr>

+ <tr>

+ <th scope="row">Objectif :</th>

+ <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Sélecteur_de_type">Sélecteur de type</h2>

+

+<p>Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> et <code>&lt;strong&gt;</code> est ainsi mise en forme.</p>

+

+<p><strong>Essayez d'ajouter une règle CSS pour sélectionner l'élément <code>&lt;h1&gt;</code> et changer sa couleur en bleu.</strong></p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>

+

+<h2 id="Le_sélecteur_universel">Le sélecteur universel</h2>

+

+<p>Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>

+

+<p>On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.</p>

+

+<h3 id="Utiliser_le_sélecteur_universel_pour_rendre_les_sélecteurs_plus_lisibles">Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles</h3>

+

+<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code>&lt;article&gt;</code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> :  </p>

+

+<pre class="brush: css">article :first-child {

+

+}</pre>

+

+<p>On peut néanmoins confondre ce sélecteur avec <code>article:first-child</code> ciblant les éléments <code>&lt;article&gt;</code>  qui sont le premier descendant d'un élément.</p>

+

+<p>Pour éviter cette confusion, on peut ajouter le sélecteur universel <code>*</code> à  <code>:first-child</code>,  le fonctionnement de ce dernier sera plus clair : il cible <em>tout</em> élément premier descendant d'un élément <code>&lt;article&gt;</code> :</p>

+

+<pre class="brush: css">article *:first-child {

+

+} </pre>

+

+<h2 id="Sélecteurs_de_classe">Sélecteurs de classe</h2>

+

+<p>Le sélecteur de classe commence par un point  <code>.</code> et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée <code>.highlight</code> et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>

+

+<h3 id="Cibler_des_classes_dun_élément_donné">Cibler des classes d'un élément donné</h3>

+

+<p>On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe <code>highlight</code> met en surbrillance, mais elle le fait différemment quand elle s'applique à un &lt;span&gt; ou à un titre &lt;h1&gt;. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>

+

+<p>Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.</p>

+

+<h3 id="Cibler_un_élément_appartenant_à_plus_dune_classe">Cibler un élément appartenant à plus d'une classe</h3>

+

+<p>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.</p>

+

+<p>L'exemple ci-dessous présente trois <code>&lt;div&gt;</code> contenant chacun une note. Si la boîte est dans la classe  <code>notebox</code> elle a une bordure grise. Si de plus elle est dans la classe <code>warning</code> ou <code>danger</code>, on change la {{cssxref("border-color")}}.</p>

+

+<p>On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>

+

+<h2 id="Sélecteurs_dID">Sélecteurs d'ID</h2>

+

+<p>Un sélecteur d'ID commence par un <code>#</code> 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'<code>id</code> 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 :</p>

+

+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>

+

+<div class="blockIndicator note">

+<p><strong>Note </strong>: Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p>

+</div>

+

+<h2 id="Prochain_article">Prochain article</h2>

+

+<p>Notre exploration des sélecteurs se poursuit par l'étude des <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut">sélecteurs d'attributs</a>.</p>

+

+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>

+

+<h2 id="Dans_ce_cours">Dans ce cours</h2>

+

+<ol>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>

+ <ul>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>

+ </ul>

+ </li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>

+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>

+</ol>