diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-14 14:30:47 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-15 07:48:59 +0100 |
| commit | faa96e657621455284245018b8a3b5050b613e6b (patch) | |
| tree | a307a407e4b101b688fee89af9959001a9aae187 /files/fr/learn/css/building_blocks/selectors | |
| parent | e26d24940b2234a1a5e63b19d19d298bf36354e2 (diff) | |
| download | translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.gz translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.bz2 translated-content-faa96e657621455284245018b8a3b5050b613e6b.zip | |
convert content to md
Diffstat (limited to 'files/fr/learn/css/building_blocks/selectors')
5 files changed, 612 insertions, 765 deletions
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md index f56a321023..243de46424 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -4,153 +4,154 @@ slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut --- -<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> +{{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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_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> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_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> +## Sélecteur de présence et de valeur -<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> +Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple `href`), ou sur des correspondances variées avec la valeur d'un attribut donné <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> + <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> +Dans l'exemple ci-dessous vous voyez ces sélecteurs en action : -<ul> - <li>Avec <code>li[class]</code> on cible tout élément <code><li></code> possédant un attribut <code>class</code>. On cible ainsi tous les éléments de la liste sauf le premier.</li> - <li><code>li[class="a"]</code> cible les <code><li></code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code><li></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><li></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> +- Avec `li[class]` on cible tout élément `<li>` possédant un attribut `class`. On cible ainsi tous les éléments de la liste sauf le premier. +- `li[class="a"]` cible les `<li>` appartenant à la classe `a` et seulement elle. Un élément `<li>` dans la classe `a` mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste. +- `li[class~="a"]` cible tout élément `<li>` dont l'attribut `class` contient `a` dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}} -<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2> +## Sélecteurs ciblant une sous-chaîne -<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> +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 `box-warning` et `box-error`, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut `[class ^= "box-"]` est là pour ça. -<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> +| Sélecteur | Exemple | Description | +| ---------------- | ------------------- | -------------------------------------------------------------------------------------------------------------- | +| `[attr^=value]` | `li[class^="box-"]` | élément sélectionné quand la valeur _value_ de l'attribut _attr_ commence par la sous-chaîne _value._ | +| `[attr$=value]` | `li[class$="-box"]` | élément sélectionné quand la valeur de l'attribut _attr_ finit par la sous-chaîne _value._ | +| `[attr*=value ]` | `li[class*="box"]` | élément sélectionné quand la la sous-chaîne _value_ apparaît quelque part dans la valeur de l'attribut _attr._ | + +L'exemple suivant montre ces sélecteurs en action : + +- `li[class^="a"]` correspond à toute valeur d'attribut commençant par un _a,_ ce sélecteur cible donc les deux premiers items de la liste. +- `li[class$="a"]` correspond à toute valeur d'attribut finissant par un _a,_ ce sélecteur cible donc les items un et trois de la liste. +- `li[class*="a"]` correspond à toute valeur d'attribut contenant quelque part un _a,_ ce sélecteur cible donc tous les items de la liste. -<p>L'exemple suivant montre ces sélecteurs en action :</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}} -<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 quelque part un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li> -</ul> +## Sensibilité à la casse -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> +Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur `i` avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (_a_ = _A_). Sans le drapeau `i`, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse. -<h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2> +Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un `a` — 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 _insensible à la casse,_ il cible donc tous les éléments de la liste. -<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant le crochet fermant. 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> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}} -<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> +> **Note :** Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur `s` 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>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> +## Pas suivants -<div class="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> +Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux [sélecteurs de pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements). -<h2 id="Pas_suivants">Pas suivants</h2> +{{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>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p> +## Dans ce cours -<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> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="Dans_ce_cours">Dans ce cours</h2> + - [Sélecteurs de classe, de type et d'identifiant](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - Sélecteurs d'attribut + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> - <li>Sélecteurs d'attribut</li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> -</ol> +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrières-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gérer la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Le dépassement du contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Dimensionnement des objets en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias, et formulaires](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mettre en forme les tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Déboguer CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser son code CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.md b/files/fr/learn/css/building_blocks/selectors/combinators/index.md index ecef10ea21..7bbafe2f86 100644 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.md @@ -8,108 +8,134 @@ tags: translation_of: Learn/CSS/Building_blocks/Selectors/Combinators original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs --- -<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> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} -<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> +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. <table class="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="/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> + <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="/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> +## Combinateur descendant -<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> +Le **combinateur descendant**— en général représenté par un seul espace (` `) — 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. -<pre class="brush: css">body article p -</pre> +```css +body article p +``` -<p>Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <code><p></code>, qui est à l'intérieur d'un élément de classe <code>.box</code>.</p> +Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément `<p>`, qui est à l'intérieur d'un élément de classe `.box`. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}} -<h2 id="Combinateur_enfant">Combinateur enfant</h2> +## Combinateur enfant -<p>Le combinateur enfant (<code>></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><p></code> qui sont des enfants directs des éléments <code><article></code>:</p> +Le combinateur enfant (`>`) 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 `<p>` qui sont des enfants directs des éléments `<article>`: -<pre class="brush: css">article > p</pre> +```css +article > p +``` -<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><li></code> qui sont un enfant direct d'un <code><ul></code>, et leur ai donné une bordure supérieure.</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 `<li>` qui sont un enfant direct d'un `<ul>`, et leur ai donné une bordure supérieure. -<p>si vous supprimez le <code>></code> qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <code><li></code> auront une bordure rouge.</p> +si vous supprimez le `>` qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments `<li>` auront une bordure rouge. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}} -<h2 id="Combinateur_frère_adjacents">Combinateur frère adjacents</h2> +## Combinateur frère adjacents -<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><img></code> qui viennent juste après les éléments <code><p></code>:</p> +Le sélecteur de frère adjacent (`+`) 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 `<img>` qui viennent juste après les éléments `<p>`: -<pre class="brush: css">p + img</pre> +```css +p + img +``` -<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><h1></code>, et le stylisons.</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 `<h1>`, et le stylisons. -<p>Si vous insérez un autre élément tel qu'un <code><h2></code> entre le <code><h1></code> et le <code><p></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> +Si vous insérez un autre élément tel qu'un `<h2>` entre le `<h1>` et le `<p>`, 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>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}} -<h2 id="Combinateur_général_de_frères">Combinateur général de frères</h2> +## Combinateur général de frères -<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><img></code> qui viennent n'importe où après les éléments <code><p></code>, nous ferions ceci:</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 (`~`). Pour sélectionner tous les éléments `<img>` qui viennent n'importe où après les éléments `<p>`, nous ferions ceci: -<pre class="brush: css">p ~ img</pre> +```css +p ~ img +``` -<p>Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <code><p></code> qui viennent après le <code><h1></code>, et même s'il y a aussi un <code><div></code> dans le document, le <code><p></code> qui vient après qu'il est sélectionné.</p> +Dans l'exemple ci-dessous, nous sélectionnons tous les éléments `<p>` qui viennent après le `<h1>`, et même s'il y a aussi un `<div>` dans le document, le `<p>` qui vient après qu'il est sélectionné. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}} -<h2 id="Utilisation_de_combinateurs">Utilisation de combinateurs</h2> +## Utilisation de combinateurs -<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><ul></code>, je pourrais utiliser ce qui suit.</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 `<ul>`, je pourrais utiliser ce qui suit. -<pre class="brush: css">ul > li[class="a"] { }</pre> +```css +ul > li[class="a"] { } +``` -<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> +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>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> +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. -<h2 id="Testez_vos_compétences!">Testez vos compétences!</h2> +## Testez vos compétences! -<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="/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</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 [Test your skills: Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks). -<h2 id="Passer_à_la_suite">Passer à la suite</h2> +## Passer à la suite -<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> +Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le [modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ol> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/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="/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="/fr/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="/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> +1. [Cascade et héritage](/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage) +2. [Sélecteurs CSS](/fr/docs/Apprendre/CSS/Building_blocks/Selectors) + + - [Sélecteurs de type, de classe, d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) + - [Pseudo-classes and pseudo-élements](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments) + - [Combinateurs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs) + +3. [Le modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite) +4. [Arrières-plans et bordures](/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordement de contenu](/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS) +8. [Taille des élements](/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, média, et élements de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables) +11. [Débogage CSS](/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/index.md b/files/fr/learn/css/building_blocks/selectors/index.md index ece86d8018..ad59f05b6a 100644 --- a/files/fr/learn/css/building_blocks/selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/index.md @@ -4,221 +4,204 @@ slug: Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors original_slug: Apprendre/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> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} -<p>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_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> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions de base en l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base installés</a + >, + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >savoir manipuler des fichiers</a + >, connaissance de base de HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_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="what_is_a_selector">Qu'est-ce qu'un sélecteur ?</h2> +## Qu'est-ce qu'un sélecteur ? -<p>Vous les avez déjà rencontrés : 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> +Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le _sujet_ de ce sélecteur. -<p><img alt="Du code où h1 est surligné." src="selector.png"></p> + -<p>Vous avez rencontré 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> +Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments `h1`, ou la classe `.special`. -<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/">spécification de niveau 3 pour les sélecteurs</a>, une spécification mature, aussi la prise en charge par les navigateurs est excellente.</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 [spécification de niveau 3 pour les sélecteurs](https://www.w3.org/TR/selectors-3/), une spécification mature, aussi la prise en charge par les navigateurs est excellente. -<h2 id="selector_lists">Listes de sélecteurs</h2> +## Listes de sélecteurs -<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> +Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un `h1` et pour une classe `.special`, je pourrais écrire deux règles : -<pre class="brush: css">h1 { +```css +h1 { color: blue; } .special { color: blue; -}</pre> +} +``` -<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p> +ou bien une seule règle en combinant les sélecteurs, séparés par une virgule : -<pre class="brush: css">h1, .special { +```css +h1, .special { color: blue; -}</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> +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 : -<pre class="brush: css">h1, +```css +h1, .special { color: blue; -}</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> +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>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} -<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> +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>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> +Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le `h1` sera mis en forme comme prévu. -<pre class="brush: css">h1 { +```css +h1 { color: blue; } ..special { color: blue; -}</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> +En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni `h1` ni les éléments de classe `.special` ne seront mis en forme. -<pre class="brush: css">h1, ..special { +```css +h1, ..special { color: blue; -}</pre> +} +``` -<h2 id="types_of_selectors">Types de sélecteurs</h2> +## Types de sélecteurs -<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> +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. -<h3 id="type_class_and_id_selectors">Sélecteurs de type, de classe, et d'ID</h3> +### Sélecteurs de type, de classe, et d'ID -<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code><h1></code> :</p> +Ce groupe inclut les sélecteurs ciblant les élements HTML tels que `<h1>` : -<pre class="brush: css">h1 { }</pre> +```css +h1 { } +``` -<p>On trouve aussi les sélecteurs ciblant une classe :</p> +On trouve aussi les sélecteurs ciblant une classe : -<pre class="brush: css">.box { }</pre> +```css +.box { } +``` -<p>ou un ID :</p> +ou un ID : -<pre class="brush: css">#unique { }</pre> +```css +#unique { } +``` -<h3 id="attribute_selectors">Sélecteurs d'attribut</h3> +### Sélecteurs d'attribut -<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> +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é : -<pre class="brush: css">a[title] { }</pre> +```css +a[title] { } +``` -<p>Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :</p> +Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise : -<pre class="brush: css">a[href="https://example.com"] { }</pre> +```css +a[href="https://example.com"] { } +``` -<h3 id="pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</h3> +### Pseudo-classes et pseudo-éléments -<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> +Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe `:hover` sélectionne un élément seulement s'il est survolé par le pointeur de la souris : -<pre class="brush: css">a:hover { }</pre> +```css +a:hover { } +``` -<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><p></code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <code><span></code> et qu'après coup on appliquait un style sur cet élément.</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, `::first-line` sélectionne la première ligne d'un texte contenu dans un élément (un `<p>` dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre `<span>` et qu'après coup on appliquait un style sur cet élément. -<pre class="brush: css">p::first-line { }</pre> +```css +p::first-line { } +``` -<h3 id="combinators">Combinateurs</h3> +### Combinateurs -<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><article></code> grâce au combinateur enfant (<code>></code>) :</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 `<article>` grâce au combinateur enfant (`>`) : -<pre class="brush: css">article > p { }</pre> +```css +article > p { } +``` -<h2 id="next_steps">À faire ensuite</h2> +## À faire ensuite -<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/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">sélecteurs de type, de classe, et d'ID</a>.</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 _Apprendre_ ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les [sélecteurs de type, de classe, et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} -<h2 id="reference_table_of_selectors">Table de référence des sélecteurs</h2> +## Table de référence des sélecteurs -<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> +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. -<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/Type_selectors">Sélecteur de type</a></td> - <td><code>h1 { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a></td> - <td><code>* { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector">The universal selector</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a></td> - <td><code>.box { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors">Class selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d'ID</a></td> - <td><code>#unique { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors">ID selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Descendant_combinator">Sélecteur descendant</a></td> - <td><code>article p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector">Descendant combinator</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Child_combinator">Sélecteur enfant</a></td> - <td><code>article > p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator">Child combinator</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Sélecteur de frère adjacent</a></td> - <td><code>h1 + p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling">Adjacent sibling</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/General_sibling_combinator">Sélecteur de frère général</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling">General sibling</a></td> - </tr> - </tbody> -</table> +| Sélecteur | Exemple | Tutoriel CSS | +| --------------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| [Sélecteur de type](/fr/docs/Web/CSS/Type_selectors) | `h1 { }` | [Sélecteurs de type](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) | +| [Sélecteur universel](/fr/docs/Web/CSS/Universal_selectors) | `* { }` | [The universal selector](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector) | +| [Sélecteur de classe](/fr/docs/Web/CSS/Class_selectors) | `.box { }` | [Class selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors) | +| [Sélecteur d'ID](/fr/docs/Web/CSS/ID_selectors) | `#unique { }` | [ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors) | +| [Sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | +| [Pseudo-class selectors](/fr/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [Pseudo-classes](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class) | +| [Pseudo-element selectors](/fr/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [Pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element) | +| [Sélecteur descendant](/fr/docs/Web/CSS/Descendant_combinator) | `article p` | [Descendant combinator](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector) | +| [Sélecteur enfant](/fr/docs/Web/CSS/Child_combinator) | `article > p` | [Child combinator](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator) | +| [Sélecteur de frère adjacent](/fr/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [Adjacent sibling](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling) | +| [Sélecteur de frère général](/fr/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p` | [General sibling](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling) | + +## Dans ce module + +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<h2 id="in_this_module">Dans ce module</h2> - -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 8e89104fdd..6e9c0d478a 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -12,389 +12,212 @@ tags: translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} -<p>Voyons maintenant les sélecteurs de <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.</p> +Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-éléments**. 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/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> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/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> +## Qu'est ce qu'une pseudo-classe ? -<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> +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>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p> +Les pseudo-classes sont signalées par un mot clé commençant par deux points `:` -<pre>:<em>pseudo-class-name</em></pre> + :pseudo-class-name -<h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3> +### Exemple d'une pseudo-classe élémentaire -<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> +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>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} -<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> +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 *dans tous les cas* 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>{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> +{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}} -<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> +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 : -<ul> - <li><code><a href="/fr/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/:invalid">:invalid</a></code></li> -</ul> +- [`:last-child`](/fr/docs/Web/CSS/:last-child) +- [`:only-child`](/fr/docs/Web/CSS/:only-child) +- [`:invalid`](/fr/docs/Web/CSS/:invalid) -<h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3> +### Pseudo-classes d'action utilisateur -<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> +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 _pseudo-classes dynamiques_, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple : -<p><code><a href="/fr/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="/fr/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p> +[`:hover`](/fr/docs/Web/CSS/:hover) — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien. +[`:focus`](/fr/docs/Web/CSS/:focus) — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} -<h2 id="Quest_ce_quun_pseudo-élément">Qu'est ce qu'un pseudo-élément ?</h2> +## Qu'est ce qu'un pseudo-élément ? -<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> +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 `::`. -<pre><em>::pseudo-element-name</em></pre> + ::pseudo-element-name -<div class="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> +> **Note :** 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>Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> 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> +Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément \<span> 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>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> +Le pseudo-sélecteur d'éléments `::first-line` 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>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} -<p>Il agit comme si un <code><span></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> +Il agit comme si un `<span>` é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>Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.</p> +Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes. -<h2 id="Combiner_pseudo-classes_et_pseudo-éléments">Combiner pseudo-classes et pseudo-éléments</h2> +## Combiner pseudo-classes et pseudo-éléments -<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><p></code>, qui se trouve à l'intérieur d'un élément <code><article></code></p> +Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs `:first-child` et `::first-line` 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 `<p>`, qui se trouve à l'intérieur d'un élément `<article>` -<pre class="brush: css">article p:first-child::first-line { +```css +article p:first-child::first-line { font-size: 120%; font-weight: bold; -}</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="/fr/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="/fr/docs/Web/HTML/Element/input"><code><input></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="/fr/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/fr/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="/fr/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="/fr/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><input></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="/fr/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="/fr/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><p></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><p></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="/fr/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><input></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="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +} +``` + +## Générer du contenu avec ::before et ::after + +Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété [`content`](/fr/docs/Web/CSS/content) pour insérer du contenu dans votre document en utilisant le CSS. + +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 `::before` en `::after` et voir le texte inséré à la fin de l'élément au lieu du début. + +{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} + +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. + +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 : + +{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}} + +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. + +Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` 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. + +{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} + +L'utilisation des pseudo-éléments `::before` et `::after` avec la propriété `content` 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 [CSS Arrow Please](http://www.cssarrowplease.com/), 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. + +## Section de référence + +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. + +### Pseudo-classes + +| Sélecteur | Description | +| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{ Cssxref(":active") }} | Matches when the user activates (for example clicks on) an element. | +| {{ Cssxref(":any-link") }} | Matches both the `:link` and `:visited` states of a link. | +| {{ Cssxref(":blank") }} | Matches an [`<input>` element](/fr/docs/Web/HTML/Element/input) whose input value is empty. | +| {{ Cssxref(":checked") }} | Matches a radio button or checkbox in the selected state. | +| {{ Cssxref(":current") }} | Matches the element, or an ancestor of the element, that is currently being displayed. | +| {{ Cssxref(":default") }} | Matches the one or more UI elements that are the default among a set of similar elements. | +| {{ Cssxref(":dir") }} | Select an element based on its directionality (value of the HTML [`dir`](/fr/docs/Web/HTML/Global_attributes/dir) attribute or CSS [`direction`](/fr/docs/Web/CSS/direction) property). | +| {{ Cssxref(":disabled") }} | Matches user interface elements that are in an disabled state. | +| {{ Cssxref(":empty") }} | Matches an element that has no children except optionally white space. | +| {{ Cssxref(":enabled") }} | Matches user interface elements that are in an enabled state. | +| {{ Cssxref(":first") }} | In [Paged Media](/fr/docs/Web/CSS/Paged_Media), matches the first page. | +| {{ Cssxref(":first-child") }} | Matches an element that is first among its siblings. | +| {{ Cssxref(":first-of-type") }} | Matches an element which is first of a certain type among its siblings. | +| {{ Cssxref(":focus") }} | Matches when an element has focus. | +| {{ Cssxref(":focus-visible")}} | Matches when an element has focus and the focus should be visible to the user. | +| {{ Cssxref(":focus-within") }} | Matches an element with focus plus an element with a descendent that has focus. | +| {{ Cssxref(":future") }} | Matches the elements after the current element. | +| {{ Cssxref(":hover") }} | Matches when the user hovers over an element. | +| {{ Cssxref(":indeterminate") }} | Matches UI elements whose value is in an indeterminate state, usually [checkboxes](/fr/docs/Web/HTML/Element/input/checkbox). | +| {{ Cssxref(":in-range") }} | Matches an element with a range when its value is in-range. | +| {{ Cssxref(":invalid") }} | Matches an element, such as an `<input>`, in an invalid state. | +| {{ Cssxref(":lang") }} | Matches an element based on language (value of the HTML [lang](/fr/docs/Web/HTML/Global_attributes/lang) attribute). | +| {{ Cssxref(":last-child") }} | Matches an element which is last among its siblings. | +| {{ Cssxref(":last-of-type") }} | Matches an element of a certain type that is last among its siblings. | +| {{ Cssxref(":left") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches left-hand pages. | +| {{ Cssxref(":link")}} | Matches unvisited links. | +| {{ Cssxref(":local-link")}} | Matches links pointing to pages that are in the same site as the current document. | +| {{ Cssxref(":is", ":is()")}} | Matches any of the selectors in the selector list that is passed in. | +| {{ Cssxref(":not") }} | Matches things not matched by selectors that are passed in as a value to this selector. | +| {{ Cssxref(":nth-child") }} | Matches elements from a list of siblings — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.) | +| {{ Cssxref(":nth-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements) — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.) | +| {{ Cssxref(":nth-last-child") }} | Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (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.) | +| {{ Cssxref(":nth-last-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements), counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (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.) | +| {{ Cssxref(":only-child") }} | Matches an element that has no siblings. | +| {{ Cssxref(":only-of-type") }} | Matches an element that is the only one of its type among its siblings. | +| {{ Cssxref(":optional") }} | Matches form elements that are not required. | +| {{ Cssxref(":out-of-range") }} | Matches an element with a range when its value is out of range. | +| {{ Cssxref(":past") }} | Matches the elements before the current element. | +| {{ Cssxref(":placeholder-shown") }} | Matches an input element that is showing placeholder text. | +| {{ Cssxref(":playing") }} | Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”. | +| {{ Cssxref(":paused") }} | Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”. | +| {{ Cssxref(":read-only") }} | Matches an element if it is not user-alterable. | +| {{ Cssxref(":read-write") }} | Matches an element if it is user-alterable. | +| {{ Cssxref(":required") }} | Matches form elements that are required. | +| {{ Cssxref(":right") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches right-hand pages. | +| {{ Cssxref(":root") }} | Matches an element that is the root of the document. | +| {{ Cssxref(":scope") }} | Matches any element that is a scope element. | +| {{ Cssxref(":valid") }} | Matches an element such as an `<input>` element, in a valid state. | +| {{ Cssxref(":target") }} | Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current [URL fragment](https://en.wikipedia.org/wiki/Fragment_identifier)). | +| {{ Cssxref(":visited") }} | Matches visited links. | + +### Pseudo-éléments + +| Sélecteur | Description | +| -------------------------------------------- | ---------------------------------------------------------------------------------------- | +| {{ Cssxref("::after") }} | Matches a stylable element appearing after the originating element's actual content. | +| {{ Cssxref("::before") }} | Matches a stylable element appearing before the originating element's actual content. | +| {{ Cssxref("::first-letter") }} | Matches the first letter of the element. | +| {{ Cssxref("::first-line") }} | Matches the first line of the containing element. | +| {{ Cssxref("::grammar-error") }} | Matches a portion of the document containing a grammar error as flagged by the browser. | +| {{ Cssxref("::selection") }} | Matches the portion of the document that has been selected. | +| {{ Cssxref("::spelling-error") }} | Matches a portion of the document containing a spelling error as flagged by the browser. | + +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} + +## Dans ce cours + +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md index 376bfcb1cd..43772eb59f 100644 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -4,115 +4,129 @@ slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} -<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> +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. <table class="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> + <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> +## Sélecteur de type -<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><span></code>, <code><em></code> et <code><strong></code> est ainsi mise en forme.</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 `<span>`, `<em>` et `<strong>` est ainsi mise en forme. -<p><strong>Essayez d'ajouter une règle CSS pour sélectionner l'élément <code><h1></code> et changer sa couleur en bleu.</strong></p> +**Essayez d'ajouter une règle CSS pour sélectionner l'élément `<h1>` et changer sa couleur en bleu.** -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}} -<h2 id="Le_sélecteur_universel">Le sélecteur universel</h2> +## Le sélecteur universel -<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> +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>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}} -<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> +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. -<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> +### Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles -<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><article></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="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> : </p> +On peut utiliser `*` 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 `<article>` pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les [pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) : -<pre class="brush: css">article :first-child { +```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><article></code> qui sont le premier descendant d'un élément.</p> +On peut néanmoins confondre ce sélecteur avec `article:first-child` ciblant les éléments `<article>` qui sont le premier descendant d'un élément. -<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><article></code> :</p> +Pour éviter cette confusion, on peut ajouter le sélecteur universel `*` à `:first-child`, le fonctionnement de ce dernier sera plus clair : il cible *tout* élément premier descendant d'un élément `<article>` : -<pre class="brush: css">article *:first-child { +```css +article *:first-child { -} </pre> +} +``` -<h2 id="Sélecteurs_de_classe">Sélecteurs de classe</h2> +## Sélecteurs de classe -<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> +Le sélecteur de classe commence par un point `.` 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 `.highlight` et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}} -<h3 id="Cibler_des_classes_dun_élément_donné">Cibler des classes d'un élément donné</h3> +### Cibler des classes d'un élément donné -<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 <span> ou à un titre <h1>. 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> +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 `highlight` met en surbrillance, mais elle le fait différemment quand elle s'applique à un \<span> ou à un titre \<h1>. 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>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}} -<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> +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. -<h3 id="Cibler_un_élément_appartenant_à_plus_dune_classe">Cibler un élément appartenant à plus d'une classe</h3> +### Cibler un élément appartenant à plus d'une classe -<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> +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>L'exemple ci-dessous présente trois <code><div></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> +L'exemple ci-dessous présente trois `<div>` contenant chacun une note. Si la boîte est dans la classe `notebox` elle a une bordure grise. Si de plus elle est dans la classe `warning` ou `danger`, on change la {{cssxref("border-color")}}. -<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> +On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}} -<h2 id="Sélecteurs_dID">Sélecteurs d'ID</h2> +## Sélecteurs d'ID -<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> +Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'`id` associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant : -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}} -<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> +> **Note :** 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. -<h2 id="Prochain_article">Prochain article</h2> +## Prochain article -<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> +Notre exploration des sélecteurs se poursuit par l'étude des [sélecteurs d'attributs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) |