{"id":263,"date":"2026-01-06T20:03:06","date_gmt":"2026-01-06T19:03:06","guid":{"rendered":"https:\/\/lmspro.fr\/les-selecteurs-css-guide-complet-pour-cibler-vos-elements\/"},"modified":"2026-01-23T14:16:10","modified_gmt":"2026-01-23T13:16:10","slug":"les-selecteurs-css-guide-complet-pour-cibler-vos-elements","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/les-selecteurs-css-guide-complet-pour-cibler-vos-elements\/","title":{"rendered":"CSS Selectors: A Complete Guide to Targeting Your Elements"},"content":{"rendered":"<h2>Les S\u00c3\u00a9lecteurs CSS : Guide Complet pour Cibler vos \u00c3\u2030l\u00c3\u00a9ments<\/h2>\n<p>Apprenez \u00c3\u00a0 utiliser tous les types de s\u00c3\u00a9lecteurs CSS pour cibler pr\u00c3\u00a9cis\u00c3\u00a9ment les \u00c3\u00a9l\u00c3\u00a9ments HTML. Des s\u00c3\u00a9lecteurs de type aux classes et IDs, ma\u00c3\u00aetrisez l&rsquo;art de la s\u00c3\u00a9lection CSS.<\/p>\n<div class='article-meta'>\n<p><strong>Level :<\/strong> D\u00c3\u00a9butant \u00c3\u00a0 Interm\u00c3\u00a9diaire<\/p>\n<p><strong>Dur\u00c3\u00a9e :<\/strong> 40 minutes<\/p>\n<p><strong>Target audience:<\/strong> D\u00c3\u00a9veloppeurs web, Int\u00c3\u00a9grateurs, Designers<\/p>\n<\/div>\n<h2>Objectifs p\u00c3\u00a9dagogiques<\/h2>\n<ul>\n<li>Comprendre le r\u00c3\u00b4le des s\u00c3\u00a9lecteurs CSS<\/li>\n<li>Ma\u00c3\u00aetriser les s\u00c3\u00a9lecteurs de type, classe et ID<\/li>\n<li>Combiner plusieurs s\u00c3\u00a9lecteurs efficacement<\/li>\n<li>Comprendre la sp\u00c3\u00a9cificit\u00c3\u00a9 CSS<\/li>\n<\/ul>\n<div class=\"wpa-accordion wpa-accordion-flush\" id=\"article-sections-695d5c6a67056\">\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6a67056-item-0\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Qu&#039;est-ce qu&#039;un S\u00c3\u00a9lecteur ?<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6a67056-item-0\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Un s\u00c3\u00a9lecteur CSS est la premi\u00c3\u00a8re partie d&rsquo;une r\u00c3\u00a8gle CSS. Il indique au navigateur <strong>quels \u00c3\u00a9l\u00c3\u00a9ments HTML<\/strong> doivent recevoir les styles d\u00c3\u00a9finis.<\/p>\n<p><code class=\"language-css\">\/* Le s\u00c3\u00a9lecteur est \"h1\" *\/<br \/>\nh1 {<br \/>\n color: blue;<br \/>\n font-size: 2em;<br \/>\n}<\/code><\/pre>\n<p class=\"wpa-text\">L&rsquo;\u00c3\u00a9l\u00c3\u00a9ment ou les \u00c3\u00a9l\u00c3\u00a9ments s\u00c3\u00a9lectionn\u00c3\u00a9s sont appel\u00c3\u00a9s le <strong>sujet du s\u00c3\u00a9lecteur<\/strong>.<\/p>\n<h4>Types de s\u00c3\u00a9lecteurs principaux<\/h4>\n<ul>\n<li><strong>S\u00c3\u00a9lecteur de type<\/strong> : cible un \u00c3\u00a9l\u00c3\u00a9ment HTML (<code>h1<\/code>, <code>p<\/code>, <code>div<\/code>)<\/li>\n<li><strong>S\u00c3\u00a9lecteur de classe<\/strong> : targets a class (<code>.highlight<\/code>)<\/li>\n<li><strong>S\u00c3\u00a9lecteur d&rsquo;ID<\/strong> : targets a unique identifier (<code>#menu<\/code>)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6a67056-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">S\u00c3\u00a9lecteurs de Type (\u00c3\u2030l\u00c3\u00a9ment)<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6a67056-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Le s\u00c3\u00a9lecteur de type cible tous les \u00c3\u00a9l\u00c3\u00a9ments d&rsquo;un type donn\u00c3\u00a9 dans le document.<\/p>\n<h4>HTML example<\/h4>\n<p><code class=\"language-html\"><h1>Main Title<\/h1><br \/>\n<p><br \/>\n Les l\u00c3\u00a9gumes sont bons pour la sant\u00c3\u00a9.<br \/>\n &lt;span&gt;Mangez des carottes&lt;\/span&gt; et des \u00c3\u00a9pinards.<br \/>\n<\/p><br \/>\n<p><br \/>\n Fruits too: <strong>apples<\/strong> and <em>oranges<\/em> .<br \/>\n<\/p><\/code><\/pre>\n<h4>CSS avec s\u00c3\u00a9lecteurs de type<\/h4>\n<p><code class=\"language-css\">body {<br \/>\n font-family: sans-serif;<br \/>\n}<\/p>\n<p>span {<br \/>\n background-color: yellow;<br \/>\n}<\/p>\n<p>strong {<br \/>\n color: rebeccapurple;<br \/>\n}<\/p>\n<p>em {<br \/>\n color: rebeccapurple;<br \/>\n}<\/p>\n<p>h1 {<br \/>\n color: blue;<br \/>\n}<\/code><\/pre>\n<div class=\"result-box\">\n<p class=\"wpa-text\"><strong>R\u00c3\u00a9sultat :<\/strong><\/p>\n<ul>\n<li>All the <code>&lt;span&gt;<\/code> will have a yellow background<\/li>\n<li>All the <code>&lt;strong&gt;<\/code> And <code><em><\/code> will be in purple<\/li>\n<li>THE <code>&lt;h1&gt;<\/code> will be in blue<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6a67056-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">S\u00c3\u00a9lecteurs de Classe<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6a67056-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Le s\u00c3\u00a9lecteur de classe commence par un <strong>point<\/strong> (<code>.<\/code>) et cible tous les \u00c3\u00a9l\u00c3\u00a9ments poss\u00c3\u00a9dant cette classe.<\/p>\n<h4>Syntax<\/h4>\n<p><code class=\"language-css\">.class-name {<br \/>\n \/* styles *\/<br \/>\n}<\/code><\/pre>\n<h4>Practical example<\/h4>\n<p><code class=\"language-html\"><h1 class=\"highlight\">Important Title<\/h1><br \/>\n<p><br \/>\n Texte normal avec &lt;span class=\"highlight\"&gt;partie surlign\u00c3\u00a9e&lt;\/span&gt;.<br \/>\n<\/p><br \/>\n<p class=\"highlight\"><br \/>\n Paragraphe enti\u00c3\u00a8rement mis en \u00c3\u00a9vidence.<br \/>\n<\/p><\/code><\/pre>\n<p><code class=\"language-css\">.highlight {<br \/>\n background-color: yellow;<br \/>\n}<\/code><\/pre>\n<h4>Cibler une classe sur un \u00c3\u00a9l\u00c3\u00a9ment sp\u00c3\u00a9cifique<\/h4>\n<p><code class=\"language-css\">\/* Only spans with the highlight class *\/<br \/>\nspan.highlight {<br \/>\n background-color: yellow;<br \/>\n}<\/p>\n<p>\/* Only h1 tags with the highlight class *\/<br \/>\nh1.highlight {<br \/>\n background-color: pink;<br \/>\n}<\/code><\/pre>\n<div class=\"tip-box\">\n <strong>\u00f0\u0178\u2019\u00a1 Astuce :<\/strong> Un \u00c3\u00a9l\u00c3\u00a9ment peut avoir plusieurs classes : <code>&lt;div class=&quot;box warning large&quot;&gt;<\/code>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6a67056-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Combining Multiple Classes<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6a67056-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Vous pouvez cibler des \u00c3\u00a9l\u00c3\u00a9ments ayant <strong>plusieurs classes simultan\u00c3\u00a9ment<\/strong> en les encha\u00c3\u00aenant sans espace.<\/p>\n<h4>HTML example<\/h4>\n<p><code class=\"language-html\"><div class=\"notebox\">Simple note.<\/div><\/p>\n<p><div class=\"notebox warning\">Attention !<\/div><\/p>\n<p><div class=\"notebox danger\">Hazard !<\/div><\/p>\n<p><div class=\"danger\">No style (notebox missing)<\/div><\/code><\/pre>\n<h4>CSS avec s\u00c3\u00a9lecteurs combin\u00c3\u00a9s<\/h4>\n<p><code class=\"language-css\">.notebox {<br \/>\n border: 4px solid #666666;<br \/>\n padding: 0.5em;<br \/>\n margin: 0.5em;<br \/>\n}<\/p>\n<p>\/* \u00c3\u2030l\u00c3\u00a9ment ayant les DEUX classes *\/<br \/>\n.notebox.warning {<br \/>\n border-color: orange;<br \/>\n font-weight: bold;<br \/>\n}<\/p>\n<p>.notebox.danger {<br \/>\n border-color: red;<br \/>\n font-weight: bold;<br \/>\n}<\/code><\/pre>\n<div class=\"warning-box\">\n <strong>\u00e2\u0161\u00a0\u00ef\u00b8\u008f Important :<\/strong> The last <code>&lt;div class=&quot;danger&quot;&gt;<\/code> will have no style because it lacks class <code>notebox<\/code>.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6a67056-item-4\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">S\u00c3\u00a9lecteurs d&#039;ID<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6a67056-item-4\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Le s\u00c3\u00a9lecteur d&rsquo;ID commence par un <strong>di\u00c3\u00a8se<\/strong> (<code>#<\/code>) et cible l&rsquo;\u00c3\u00a9l\u00c3\u00a9ment unique poss\u00c3\u00a9dant cet ID.<\/p>\n<h4>R\u00c3\u00a8gle importante<\/h4>\n<div class=\"important-box\">\n <strong>Un ID doit \u00c3\u00aatre unique dans tout le document.<\/strong> Utilisez-le pour cibler un \u00c3\u00a9l\u00c3\u00a9ment sp\u00c3\u00a9cifique.\n<\/div>\n<h4>Example<\/h4>\n<p><code class=\"language-html\"><h1 id=\"main-heading\">Main Title<\/h1><br \/>\n<p>First paragraph.<\/p><br \/>\n<p id=\"intro\">Introductory paragraph.<\/p><\/code><\/pre>\n<p><code class=\"language-css\">#intro {<br \/>\n background-color: yellow;<br \/>\n}<\/p>\n<p>h1#main-heading {<br \/>\n color: rebeccapurple;<br \/>\n}<\/code><\/pre>\n<h4>When to use ID vs Class?<\/h4>\n<table class=\"comparison-table\">\n<tr>\n<th>ID (#)<\/th>\n<th>Class (.)<\/th>\n<\/tr>\n<tr>\n<td>Unique per page<\/td>\n<td>R\u00c3\u00a9utilisable<\/td>\n<\/tr>\n<tr>\n<td>Navigation, anchors<\/td>\n<td>Styles r\u00c3\u00a9p\u00c3\u00a9titifs<\/td>\n<\/tr>\n<tr>\n<td>Haute sp\u00c3\u00a9cificit\u00c3\u00a9<\/td>\n<td>Sp\u00c3\u00a9cificit\u00c3\u00a9 moyenne<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6a67056-item-5\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Sp\u00c3\u00a9cificit\u00c3\u00a9 et Cascade<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6a67056-item-5\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Quand plusieurs r\u00c3\u00a8gles ciblent le m\u00c3\u00aame \u00c3\u00a9l\u00c3\u00a9ment, CSS utilise la <strong>sp\u00c3\u00a9cificit\u00c3\u00a9<\/strong> pour d\u00c3\u00a9terminer laquelle appliquer.<\/p>\n<h4>Ordre de sp\u00c3\u00a9cificit\u00c3\u00a9 (du plus faible au plus fort)<\/h4>\n<ol>\n<li><strong>S\u00c3\u00a9lecteurs de type<\/strong> (<code>p<\/code>, <code>h1<\/code>) &#8211; sp\u00c3\u00a9cificit\u00c3\u00a9: 0,0,1<\/li>\n<li><strong>S\u00c3\u00a9lecteurs de classe<\/strong> (<code>.special<\/code>) &#8211; sp\u00c3\u00a9cificit\u00c3\u00a9: 0,1,0<\/li>\n<li><strong>S\u00c3\u00a9lecteurs d&rsquo;ID<\/strong> (<code>#main<\/code>) &#8211; sp\u00c3\u00a9cificit\u00c3\u00a9: 1,0,0<\/li>\n<\/ol>\n<h4>Example of conflict<\/h4>\n<p><code class=\"language-css\">.special {<br \/>\n color: red;<br \/>\n}<\/p>\n<p>p {<br \/>\n color: blue;<br \/>\n}<\/code><\/pre>\n<p><code class=\"language-html\">&lt;p class=&quot;special&quot;&gt;What color am I?&lt;\/p&gt;<\/code><\/pre>\n<p class=\"wpa-text\"><strong>R\u00c3\u00a9ponse :<\/strong> The text will be <span style=\"color:red\">red<\/span> car la classe a une sp\u00c3\u00a9cificit\u00c3\u00a9 plus \u00c3\u00a9lev\u00c3\u00a9e que le s\u00c3\u00a9lecteur de type.<\/p>\n<h4>The waterfall in action<\/h4>\n<p><code class=\"language-css\">p { color: red; }<br \/>\np { color: blue; } \/* Celui-ci gagne (derni\u00c3\u00a8re r\u00c3\u00a8gle) *\/<\/code><\/pre>\n<div class=\"tip-box\">\n <strong>\u00f0\u0178\u2019\u00a1 R\u00c3\u00a8gle :<\/strong> \u00c3\u20ac sp\u00c3\u00a9cificit\u00c3\u00a9 \u00c3\u00a9gale, c&rsquo;est la derni\u00c3\u00a8re r\u00c3\u00a8gle d\u00c3\u00a9clar\u00c3\u00a9e qui s&rsquo;applique.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6a67056-item-6\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Exercice : Cr\u00c3\u00a9er un Syst\u00c3\u00a8me de Composants<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6a67056-item-6\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Cr\u00c3\u00a9ez un syst\u00c3\u00a8me de cartes avec diff\u00c3\u00a9rents \u00c3\u00a9tats :<\/p>\n<h4>HTML<\/h4>\n<p><code class=\"language-html\"><div class=\"card\"><br \/>\n <h3>Standard Card<\/h3><br \/>\n <p>Basic content.<\/p><br \/>\n<\/div><\/p>\n<p><div class=\"card featured\"><br \/>\n <h3>Featured Card<\/h3><br \/>\n &lt;p&gt;Mise en avant sp\u00c3\u00a9ciale.&lt;\/p&gt;<br \/>\n<\/div><\/p>\n<p><div class=\"card warning\"><br \/>\n <h3>Alert Map<\/h3><br \/>\n <p>Important message.<\/p><br \/>\n<\/div><\/p>\n<p><div id=\"hero-card\" class=\"card featured\"><br \/>\n <h3>Hero Card<\/h3><br \/>\n <p>The most important one.<\/p><br \/>\n<\/div><\/code><\/pre>\n<h4>CSS<\/h4>\n<p><code class=\"language-css\">\/* Common base *\/<br \/>\n.card {<br \/>\n border: 2px solid #ccc;<br \/>\n border-radius: 8px;<br \/>\n padding: 1rem;<br \/>\n margin: 1rem 0;<br \/>\n background: white;<br \/>\n}<\/p>\n<p>\/* Variants by class *\/<br \/>\n.card.featured {<br \/>\n border-color: gold;<br \/>\n background: #fffef0;<br \/>\n}<\/p>\n<p>.card.warning {<br \/>\n border-color: red;<br \/>\n background: #fff0f0;<br \/>\n}<\/p>\n<p>\/* Unique style per ID *\/<br \/>\n#hero-card {<br \/>\n border-width: 4px;<br \/>\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);<br \/>\n}<\/code><\/pre>\n<div class=\"success-box\">\n <strong>\u00e2\u0153\u2026 R\u00c3\u00a9sultat :<\/strong> Un syst\u00c3\u00a8me modulaire o\u00c3\u00b9 chaque carte peut combiner plusieurs styles.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"quiz-block-1\" class=\"quiz-container\" data-quiz-json=\"https:\/\/lmspro.fr\/wp-content\/plugins\/generate-article-endpoint\/quiz-data\/en\/quiz-selecteurs-css-guide-complet.json\" aria-label=\"Interactive Quiz\"><div class=\"quiz-loading\" role=\"status\" aria-live=\"polite\"><span class=\"quiz-sr-only\">Loading quiz...<\/span><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Les S\u00c3\u00a9lecteurs CSS : Guide Complet pour Cibler vos \u00c3\u2030l\u00c3\u00a9ments Apprenez \u00c3\u00a0 utiliser tous les types de s\u00c3\u00a9lecteurs CSS pour cibler pr\u00c3\u00a9cis\u00c3\u00a9ment les \u00c3\u00a9l\u00c3\u00a9ments HTML. Des s\u00c3\u00a9lecteurs de type aux classes et IDs, ma\u00c3\u00aetrisez l&rsquo;art de la s\u00c3\u00a9lection CSS. Niveau : D\u00c3\u00a9butant \u00c3\u00a0 Interm\u00c3\u00a9diaire Dur\u00c3\u00a9e : 40 minutes Public cible : D\u00c3\u00a9veloppeurs web, Int\u00c3\u00a9grateurs, Designers &#8230; <a href=\"https:\/\/lmspro.fr\/en\/les-selecteurs-css-guide-complet-pour-cibler-vos-elements\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0Les S\u00e9lecteurs CSS : Guide Complet pour Cibler vos \u00c9l\u00e9ments\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,93],"tags":[65,62,26,63,61,64],"class_list":["post-263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-module-1-fondamentaux-techniques-du-web","category-selecteurs-cascade","tag-cascade","tag-classes","tag-css","tag-id","tag-selecteurs","tag-specificite"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":1,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":468,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/263\/revisions\/468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/264"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}