From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/css_selectors/index.html | 115 --------------------- files/fr/web/css/css_selectors/index.md | 115 +++++++++++++++++++++ .../index.html | 62 ----------- .../index.md | 62 +++++++++++ 4 files changed, 177 insertions(+), 177 deletions(-) delete mode 100644 files/fr/web/css/css_selectors/index.html create mode 100644 files/fr/web/css/css_selectors/index.md delete mode 100644 files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md (limited to 'files/fr/web/css/css_selectors') diff --git a/files/fr/web/css/css_selectors/index.html b/files/fr/web/css/css_selectors/index.html deleted file mode 100644 index ead1aa386e..0000000000 --- a/files/fr/web/css/css_selectors/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Sélecteurs CSS -slug: Web/CSS/CSS_Selectors -tags: - - Aperçu - - CSS - - CSS Selectors - - Reference - - Sélecteur -translation_of: Web/CSS/CSS_Selectors -original_slug: Web/CSS/Sélecteurs_CSS ---- -
{{CSSRef}}
- -

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

- -

Les sélecteurs simples

- -
-
Les sélecteurs de type
-
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
- Syntaxe : nomelement
- Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
-
Les sélecteurs de classe
-
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
- Syntaxe : .nomclasse
- Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
-
Les sélecteurs d'identifiant
-
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
- Syntaxe : #valeurid
- Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
-
Le sélecteur universel
-
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
- Syntaxe : * ns|* *|*
- Exemple : * permettra de cibler tous les éléments du document.
-
Les sélecteurs d'attribut
-
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
- Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
- Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
-
- -

Les combinateurs

- -
-
Les sélecteurs de voisin direct
-
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
- Syntaxe : A + B
- Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
-
Les sélecteurs de voisins
-
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
- Syntaxe : A ~ B
- Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
-
Les sélecteurs d'éléments enfants
-
Le combinateur '>' permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.
- Syntaxe : A > B
- Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
-
Les sélecteurs d'éléments descendants
-
Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.
- Syntaxe : A B
- Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
-
Le combinateur de colonne{{experimental_inline}}
-
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
- Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
-
- -

Les pseudo-classes

- -
-
Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
-
Exemple: a:visited permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
-
- -

Les pseudo-éléments

- -
-
Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
-
Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du combinateur de colonne (||), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Ajout du combinateur de voisin ~. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (::)
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} -

Ajout des combinateurs pour les enfants (>) et voisins adjacents (+).
- Ajout du sélecteur universel et du sélecteur d'attribut.

-
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/css_selectors/index.md b/files/fr/web/css/css_selectors/index.md new file mode 100644 index 0000000000..ead1aa386e --- /dev/null +++ b/files/fr/web/css/css_selectors/index.md @@ -0,0 +1,115 @@ +--- +title: Sélecteurs CSS +slug: Web/CSS/CSS_Selectors +tags: + - Aperçu + - CSS + - CSS Selectors + - Reference + - Sélecteur +translation_of: Web/CSS/CSS_Selectors +original_slug: Web/CSS/Sélecteurs_CSS +--- +
{{CSSRef}}
+ +

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

+ +

Les sélecteurs simples

+ +
+
Les sélecteurs de type
+
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
+ Syntaxe : nomelement
+ Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
+
Les sélecteurs de classe
+
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
+ Syntaxe : .nomclasse
+ Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
+
Les sélecteurs d'identifiant
+
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
+ Syntaxe : #valeurid
+ Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
+
Le sélecteur universel
+
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
+ Syntaxe : * ns|* *|*
+ Exemple : * permettra de cibler tous les éléments du document.
+
Les sélecteurs d'attribut
+
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
+ Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
+ Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
+
+ +

Les combinateurs

+ +
+
Les sélecteurs de voisin direct
+
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
+ Syntaxe : A + B
+ Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
+
Les sélecteurs de voisins
+
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
+ Syntaxe : A ~ B
+ Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
+
Les sélecteurs d'éléments enfants
+
Le combinateur '>' permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.
+ Syntaxe : A > B
+ Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
+
Les sélecteurs d'éléments descendants
+
Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.
+ Syntaxe : A B
+ Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
+
Le combinateur de colonne{{experimental_inline}}
+
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
+ Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
+
+ +

Les pseudo-classes

+ +
+
Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
+
Exemple: a:visited permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
+
+ +

Les pseudo-éléments

+ +
+
Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
+
Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du combinateur de colonne (||), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Ajout du combinateur de voisin ~. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (::)
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} +

Ajout des combinateurs pour les enfants (>) et voisins adjacents (+).
+ Ajout du sélecteur universel et du sélecteur d'attribut.

+
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html deleted file mode 100644 index 72c96372e8..0000000000 --- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Utiliser la pseudo-classe :target dans un sélecteur -slug: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors -original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur ---- -
{{CSSRef}}
- -

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.

- -

Choisir une cible

- -

La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple contient le fragment d'identifiant #Exemple. En HTML, les identifiants correspondent aux valeurs des attributs id et name, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

- -

Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :

- -
h2:target {
-  font-weight: bold;
-}
- -

On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment #Exemple, on pourra écrire :

- -
#Exemple:target {
-  border: 1px solid black;
-}
- -

Cibler tous les éléments

- -

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :

- -
:target {
-  color: red;
-}
-
- -

Exemple

- -

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.

- -
<h4 id="un">...</h4> <p id="deux">...</p>
-<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
-
-<a href="#un">Premier</a>
-<a href="#deux">Deuxième</a>
-<a href="#trois">Troisième</a>
-<a href="#quatre">Quatrième</a>
-<a href="#cinq">Cinquième</a>
- -

Conclusion

- -

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md new file mode 100644 index 0000000000..72c96372e8 --- /dev/null +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -0,0 +1,62 @@ +--- +title: Utiliser la pseudo-classe :target dans un sélecteur +slug: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur +--- +
{{CSSRef}}
+ +

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.

+ +

Choisir une cible

+ +

La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple contient le fragment d'identifiant #Exemple. En HTML, les identifiants correspondent aux valeurs des attributs id et name, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

+ +

Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :

+ +
h2:target {
+  font-weight: bold;
+}
+ +

On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment #Exemple, on pourra écrire :

+ +
#Exemple:target {
+  border: 1px solid black;
+}
+ +

Cibler tous les éléments

+ +

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :

+ +
:target {
+  color: red;
+}
+
+ +

Exemple

+ +

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.

+ +
<h4 id="un">...</h4> <p id="deux">...</p>
+<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
+
+<a href="#un">Premier</a>
+<a href="#deux">Deuxième</a>
+<a href="#trois">Troisième</a>
+<a href="#quatre">Quatrième</a>
+<a href="#cinq">Cinquième</a>
+ +

Conclusion

+ +

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf