diff options
Diffstat (limited to 'files/fr/web/css/_colon_has')
| -rw-r--r-- | files/fr/web/css/_colon_has/index.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/files/fr/web/css/_colon_has/index.html b/files/fr/web/css/_colon_has/index.html new file mode 100644 index 0000000000..ae987efbd4 --- /dev/null +++ b/files/fr/web/css/_colon_has/index.html @@ -0,0 +1,69 @@ +--- +title: ':has' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference + - Sélecteur +translation_of: 'Web/CSS/:has' +--- +<div>{{CSSRef}}</div> + +<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> + +<p>Cette pseudo-classe <code>:has()</code> prend en paramètre une liste de sélecteurs.</p> + +<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> + +<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> */ +/* 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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">:has(<em>liste_selecteurs</em>) {<em> proprietes</em> }</pre> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<pre class="brush: css">a:has(> img) +</pre> + +<p>Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :</p> + +<pre class="brush: css">h1:has(+ p)</pre> + +<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", "#relational", ":has()")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.selectors.has")}}</p> |