diff options
Diffstat (limited to 'files/fr/web/css/css_selectors/index.md')
| -rw-r--r-- | files/fr/web/css/css_selectors/index.md | 187 |
1 files changed, 97 insertions, 90 deletions
diff --git a/files/fr/web/css/css_selectors/index.md b/files/fr/web/css/css_selectors/index.md index ead1aa386e..7c77728cab 100644 --- a/files/fr/web/css/css_selectors/index.md +++ b/files/fr/web/css/css_selectors/index.md @@ -10,106 +10,113 @@ tags: translation_of: Web/CSS/CSS_Selectors original_slug: Web/CSS/Sélecteurs_CSS --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</p> +**Les sélecteurs** définissent les éléments sur lesquelles s'applique un ensemble de règles CSS. -<h2 id="Les_sélecteurs_simples">Les sélecteurs simples</h2> +## Les sélecteurs simples -<dl> - <dt><a href="/fr/docs/Web/CSS/Type_selectors">Les sélecteurs de type</a></dt> - <dd>Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.<br> - <strong>Syntaxe :</strong> <code><var>nomelement</var></code><br> - <strong>Exemple :</strong> <code>input</code> permettra de cibler n'importe quel élément {{HTMLElement('input')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Class_selectors">Les sélecteurs de classe</a></dt> - <dd>Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut <code>class</code>.<br> - <strong>Syntaxe :</strong> <code>.<var>nomclasse</var></code><br> - <strong>Exemple :</strong> <code>.index</code> permettra de cibler n'importe quel élément qui possède la classe <code>index</code> (vraisemblablement définie avec un attribut <code>class="index"</code>).</dd> - <dt><a href="/fr/docs/Web/CSS/ID_selectors">Les sélecteurs d'identifiant</a></dt> - <dd>Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut <code>id</code>. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.<br> - <strong>Syntaxe :</strong> <code>#<var>valeurid</var></code><br> - <strong>Exemple :</strong> <code>#toc</code> permettra de cibler l'élément qui possède l'identifiant <code>toc</code> (vraisemblablement défini avec un attribut <code>id="toc"</code>).</dd> - <dt><a href="/fr/docs/Web/CSS/Universal_selectors">Le sélecteur universel</a></dt> - <dd>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.<br> - <strong>Syntaxe :</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br> - <strong>Exemple :</strong> <code>*</code> permettra de cibler tous les éléments du document.</dd> - <dt><a href="/fr/docs/Web/CSS/Attribute_selectors">Les sélecteurs d'attribut</a></dt> - <dd>Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.<br> - <strong>Syntaxe :</strong> <code>[attr]</code> <code>[attr=valeur]</code> <code>[attr~=valeur]</code> <code>[attr|=valeur] [attr^=valeur]</code> <code>[attr$=valeur]</code> <code>[attr*=valeur]</code><br> - <strong>Exemple :</strong> <code>[autoplay]</code> permettra de cibler tous les éléments qui possède l'attribut <code>autoplay</code> défini (quelle que soit sa valeur).</dd> -</dl> +- [Les sélecteurs de type](/fr/docs/Web/CSS/Type_selectors) + - : 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](/fr/docs/Web/CSS/Class_selectors) + - : 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](/fr/docs/Web/CSS/ID_selectors) + - : 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](/fr/docs/Web/CSS/Universal_selectors) + - : 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](/fr/docs/Web/CSS/Attribute_selectors) + - : 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). -<h2 id="Les_combinateurs">Les combinateurs</h2> +## Les combinateurs -<dl> - <dt><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Les sélecteurs de voisin direct</a></dt> - <dd>Le combinateur <code>'+'</code> permet de sélectionner les nœuds qui suivent immédiatement un élément donné.<br> - <strong>Syntaxe :</strong> <code><var>A</var> + <var>B</var></code><br> - <strong>Exemple :</strong> <code>div + p</code> permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/General_sibling_combinator">Les sélecteurs de voisins</a></dt> - <dd>Le combinateur <code>'~'</code> permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.<br> - <strong>Syntaxe :</strong> <code><var>A</var> ~ <var>B</var></code><br> - <strong>Exemple :</strong> <code>p ~ span</code> 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.</dd> - <dt><a href="/fr/docs/Web/CSS/Child_combinator">Les sélecteurs d'éléments enfants</a></dt> - <dd>Le combinateur <code>'>'</code> permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.<br> - <strong>Syntaxe :</strong> <code><var>A</var> > <var>B</var></code><br> - <strong>Exemple :</strong> <code>ul > li</code> permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Descendant_combinator">Les sélecteurs d'éléments descendants</a></dt> - <dd>Le combinateur <code> </code> (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.<br> - <strong>Syntaxe :</strong> <code>A B</code><br> - <strong>Exemple :</strong> <code>div span</code> permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Column_combinator">Le combinateur de colonne</a>{{experimental_inline}}</dt> - <dd>Le combinateur <code>||</code> sélectionne les nœuds qui appartiennent à une colonne. <strong>Syntaxe :</strong> <code>A || B</code><br> - <strong>Exemple :</strong> <code>col || td</code> permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.</dd> -</dl> +- [Les sélecteurs de voisin direct](/fr/docs/Web/CSS/Adjacent_sibling_combinator) + - : 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](/fr/docs/Web/CSS/General_sibling_combinator) + - : 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](/fr/docs/Web/CSS/Child_combinator) + - : 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](/fr/docs/Web/CSS/Descendant_combinator) + - : 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](/fr/docs/Web/CSS/Column_combinator){{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')}}. -<h2 id="Les_pseudo-classes">Les pseudo-classes</h2> +## Les pseudo-classes -<dl> - <dt><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a> permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.</dt> - <dd><strong>Exemple:</strong> <code>a:visited</code> permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.</dd> -</dl> +- [Les pseudo-classes](/fr/docs/Web/CSS/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. -<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> +## Les pseudo-éléments -<dl> - <dt><a href="/fr/docs/Web/CSS/Pseudo-elements">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt> - <dd><strong>Exemple :</strong> <code>p::first-line</code> permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.</dd> -</dl> +- [Les pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) 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. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Ajout du combinateur de colonne (<code>||</code>), 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.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Ajout du combinateur de voisin <code>~</code>. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (<code>::</code>)</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> - <p>Ajout des combinateurs pour les enfants (<code>></code>) et voisins adjacents (<code>+</code>).<br> - Ajout du sélecteur universel et du sélecteur d'attribut.</p> - </td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> + Ajout du combinateur de colonne (<code>||</code>), 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. + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> + Ajout du combinateur de voisin <code>~</code>. Les pseudo-éléments + utilisent désormais un préfixe avec deux fois deux-points + (<code>::</code>) + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> + <p> + Ajout des combinateurs pour les enfants (<code>></code>) et voisins + adjacents (<code>+</code>).<br />Ajout du sélecteur universel et du + sélecteur d'attribut. + </p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> </table> |