diff options
Diffstat (limited to 'files/fr/web/css/attribute_selectors/index.html')
| -rw-r--r-- | files/fr/web/css/attribute_selectors/index.html | 243 |
1 files changed, 243 insertions, 0 deletions
diff --git a/files/fr/web/css/attribute_selectors/index.html b/files/fr/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..6c9e719345 --- /dev/null +++ b/files/fr/web/css/attribute_selectors/index.html @@ -0,0 +1,243 @@ +--- +title: Sélecteurs d'attribut +slug: Web/CSS/Sélecteurs_d_attribut +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p>Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.</p> + +<pre class="brush: css no-line-numbers">/* Les éléments <a> avec un attribut title */ +a[title] { + color: purple; +} + +/* Les éléments <a> avec un href qui correspond */ +/* à "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* Les éléments <a> dont href contient "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* Les éléments <a> dont href finit par ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* Les éléments <a> dont l'attribut class contient le mot logo */ +/* comportement identique à a.logo */ +a[class~="logo"] { + padding: 2px; +}</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Permet de cibler un élément qui possède un attribut <code>attr</code>.</dd> + <dt><code>[<em>attr</em>=<em>valeur</em>]</code></dt> + <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code>.</dd> + <dt><code>[<em>attr</em>~=<em>valeur</em>]</code></dt> + <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est <code>valeur</code>. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.</dd> + <dt><code>[<em>attr</em>|=<em>valeur</em>]</code></dt> + <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code> ou dont la valeur commence par <code>valeur</code> suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.</dd> + <dt><code>[<em>attr</em>^=<em>valeur</em>]</code></dt> + <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur commence par <code>valeur</code>.</dd> + <dt><code>[<em>attr</em>$=<em>valeur</em>]</code></dt> + <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur se termine par <code>valeur</code>.</dd> + <dt><code>[<em>attr</em>*=<em>valeur</em>]</code></dt> + <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> et dont la valeur contient au moins une occurrence de <code>valeur</code> dans la chaîne de caractères.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt> + <dd>On peut ajouter un <code>i</code> (ou <code>I</code>) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).</dd> + <dt><code>[attr operateur valeur s]</code> {{experimental_inline}}</dt> + <dd>Ajouter un <code>s</code> (ou <code>S</code>) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Liens">Liens</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Liens internes commençant avec "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Liens avec "example" n'importe où dans l'URL */ +a[href*="example"] { + background-color: silver; +} + +/* Liens avec "insensitive" n'importe où dans l'URL, + quelle que soit la casse */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Liens avec "cAsE" n'importe où dans l'URL, + et avec cette casse donnée.*/ +a[href*="cAsE" s] { + color: pink; +} + +/* Liens qui finissent ".org" */ +a[href$=".org"] { + color: red; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Lien interne<a></li> + <li><a href="http://example.com">Lien d'exemple</a></li> + <li><a href="#InSensitive">Lien interne insensible à la casse</a></li> + <li><a href="http://example.org">Lien vers example.org</a></li> +</ul></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Liens")}}</p> + +<h3 id="Langues">Langues</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Tous les éléments divs avec un attribut `lang` seront en gras. */ +div[lang] { + font-weight: bold; +} + +/* Tous les divs en anglais américains seront bleus. */ +div[lang~="en-us"] { + color: blue; +} + +/* Tous les divs en portugais seront verts. */ +div[lang="pt"] { + color: green; +} + +/* Tous les divs en chinois seront rouges (chinois + simplifié (zh-CN) ou traditionnel (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* Tous les divs en chinois traditionnels pour l'attribut + `data-lang` seront violet. */ +/* Note : Les doubles quotes ne sont pas strictement nécessaires + ici */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Langues")}}</p> + +<h3 id="Listes_ordonnées">Listes ordonnées</h3> + +<p>{{SeeCompatTable}}</p> + +<p>La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.</p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* Les types de liste devront être utilisé avec le + marqueur pour la casse vu les spécifications HTML */ +ol[type="a"] { + list-style-type: lower-alpha; + background: red; +} + +ol[type="a" s] { + list-style-type: lower-alpha; + background: lime; +} + +ol[type="A" s] { + list-style-type: upper-alpha; + background: lime; +}</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><ol type="A"> + <li>Liste d'exemple</li> +</ol></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Listes_ordonnées")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<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', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{CSSxRef("attr")}}</li> + <li>Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}</li> + <li>Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}</li> + <li>Ces méthodes sont implémentées sur le <em>mixin</em> {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li> +</ul> |