From 4a5e4cfc135c8884b16de9d4ee136cfc80d9940d Mon Sep 17 00:00:00 2001 From: tetsuhaut Date: Thu, 19 Aug 2021 21:31:58 +0200 Subject: correction terme impropre (#2023) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * correction terme impropre des parenthèses : () des crochets : [] * linting, typo fixing Co-authored-by: julieng --- .../selectors/attribute_selectors/index.html | 104 ++++++++------------- 1 file changed, 41 insertions(+), 63 deletions(-) (limited to 'files/fr') diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html index a32606765a..94b5601bf6 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -1,35 +1,29 @@ --- title: Sélecteurs d'attribut slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors -tags: - - Apprendre - - Attribut - - CSS - - Débutant - - Sélecteurs translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut ---

{{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")}}

-

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.

+

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.

- - + + - +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Objectif : Découvrir les sélecteurs d'attribut et comment les utiliser.
-

Sélecteur de présence et de valeur

+

Sélecteur de présence et de valeur

-

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é

+

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é

@@ -43,18 +37,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut - + - + @@ -62,7 +56,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut - +
[attr] a[title]Cible les éléments avec un attribut du nom de attr — la valeur entre les crochets droits.Cible les éléments avec un attribut du nom de attr — la valeur entre les crochets droits.
[attr=value] a[href="https://example.com"]Cible les éléments dont l'attribut attr a la valeur value — la chaîne entre guillemets.Cible les éléments dont l'attribut attr a la valeur value — la chaîne entre guillemets.
[attr~=value] p[class~="special"] -

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

+

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

Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.

[attr|=value] div[lang|="zh"]Cible les éléments avec un attribut attr dont la valeur peut être exactement value ou peut commencer par value immédiatement suivie d'un trait d'union.Cible les éléments avec un attribut attr dont la valeur peut être exactement value ou peut commencer par value immédiatement suivie d'un trait d'union.
@@ -70,16 +64,16 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut

Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :

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

-

Sélecteurs ciblant une sous-chaîne 

+

Sélecteurs ciblant une sous-chaîne

-

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.

+

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.

@@ -93,18 +87,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut - + - + + la sous-chaîne value apparaît quelque part dans la valeur de l'attribut attr.
[attr^=value] li[class^="box-"]élément sélectionné quand la valeur value de l'attribut attr commence par la sous-chaîne value.é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. é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.
@@ -112,67 +106,51 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut

L'exemple suivant montre ces sélecteurs en action :

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

Sensibilité à la casse

-

Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur i avant la parenthèse fermante. 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.

+

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.

-

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.

+

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.

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

-

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.

-
- -

À faire vous-mêmes

- -

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

- - - -

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

- -
-

Note : Vous pouvez jeter un œil à la solution ici —  mais essayez d'abord de la trouver par vous-même !

+

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.

Pas suivants

-

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.

+

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.

{{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")}}

Dans ce cours

    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors +
  3. Cascade et héritage
    4. +
  4. Sélecteurs CSS
    5. -
  5. The box model
    6. -
  6. Backgrounds and borders
    7. -
  7. Handling different text directions
    8. -
  8. Overflowing content
    9. -
  9. Values and units
    10. -
  10. Sizing items in CSS
    11. -
  11. Images, media, and form elements
    12. -
  12. Styling tables
    13. -
  13. Debugging CSS
    14. -
  14. Organizing your CSS
    15. +
  15. Le modèle de boîte
    16. +
  16. Arrières-plans et bordures
    17. +
  17. Gérer la directionnalité du texte
    18. +
  18. Le dépassement du contenu
    19. +
  19. Valeurs et unités
    20. +
  20. Dimensionnement des objets en CSS
    21. +
  21. Images, médias, et formulaires
    22. +
  22. Mettre en forme les tableaux
    23. +
  23. Déboguer CSS
    24. +
  24. Organiser son code CSS
-- cgit v1.2.3-54-g00ecf