diff options
Diffstat (limited to 'files/fr/web/css/_colon_has/index.md')
| -rw-r--r-- | files/fr/web/css/_colon_has/index.md | 68 |
1 files changed, 29 insertions, 39 deletions
diff --git a/files/fr/web/css/_colon_has/index.md b/files/fr/web/css/_colon_has/index.md index 6b2f7ff50e..29cfe11144 100644 --- a/files/fr/web/css/_colon_has/index.md +++ b/files/fr/web/css/_colon_has/index.md @@ -1,67 +1,57 @@ --- title: ':has' -slug: 'Web/CSS/:has' +slug: Web/CSS/:has tags: - CSS - Experimental - Pseudo-classe - Reference - Sélecteur -translation_of: 'Web/CSS/:has' +translation_of: Web/CSS/:has --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:has()</code></strong> permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).</p> +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:has()`** permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément). -<p>Cette pseudo-classe <code>:has()</code> prend en paramètre une liste de sélecteurs.</p> +Cette pseudo-classe `:has()` prend en paramètre une liste de sélecteurs. -<div class="note"> -<p><strong>Note :</strong> Pour des raisons de performances et dans la spécification actuelle, <a href="https://drafts.csswg.org/selectors/#live-profile"><code>has()</code> n'est pas classé comme un sélecteur dynamique</a> et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.</p> -</div> +> **Note :** Pour des raisons de performances et dans la spécification actuelle, [`has()` n'est pas classé comme un sélecteur dynamique](https://drafts.csswg.org/selectors/#live-profile) et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}. -<pre class="brush: js">/* Avec cette ligne de JavaScript, on récupère */ -/* tous les éléments <a> qui ont un fils direct */ -/* qui est un élément <img> */ +```js +/* Avec cette ligne de JavaScript, on récupère */ +/* tous les éléments <a> qui ont un fils direct */ +/* qui est un élément <img> */ /* Attention, actuellement cette fonction n'est */ /* pas prise en charge par les navigateurs et */ /* n'est pas conçue pour fonctionner dans les */ /* feuilles de style */ -var test = document.querySelector('a:has(> img)');</pre> +var test = document.querySelector('a:has(> img)'); +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">:has(<em>liste_selecteurs</em>) {<em> proprietes</em> }</pre> + :has(liste_selecteurs) { proprietes } -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :</p> +Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} : -<pre class="brush: css">a:has(> img) -</pre> +```css +a:has(> img) +``` -<p>Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :</p> +Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} : -<pre class="brush: css">h1:has(+ p)</pre> +```css +h1:has(+ p) +``` -<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", "#relational", ":has()")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName("CSS4 Selectors", "#relational", ":has()")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.selectors.has")}}</p> +{{Compat("css.selectors.has")}} |