path: root/files/fr/web/css/_colon_is/index.html

---
title: ':is() (:matches(), :any())'
slug: 'Web/CSS/:is'
tags:
  - CSS
  - Experimental
  - Pseudo-classe
  - Reference
  - Web
translation_of: 'Web/CSS/:is'
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:is()</code></strong> prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.</p>

<p>La plupart des navigateurs prennent encore en charge cette fonctionnalité via <code>:matches()</code>, ou via la pseudo-classe préfixée — <code>:any()</code> (anciennes versions de Chrome, Firefox et Safari). <code>:any()</code> fonctionne exactement comme <code>:matches()</code> et <code>:is()</code> mais nécessite l'utilisation de préfixes et ne prend pas en charge <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">les sélecteurs complexes</a>.</p>

<div class="note">
<p><strong>Note :</strong> <code>:matches()</code> a été renommé en <code>is()</code> d'après <a href="https://github.com/w3c/csswg-drafts/issues/3258">l'<em>issue</em> 3258 du CSSWG</a>.</p>
</div>

<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel paragraphe survolé
   qui se trouve au sein d'un header, main, ou
   footer */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* La notation précédente est équivalente à */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}


/* La version rétro-compatible avec :-*-any()  */
:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
:-webkit-any(header, main, footer) p:hover{
  color: red;
  cursor: pointer;
}
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
</pre>

<h2 id="Syntaxe">Syntaxe</h2>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_fonctionnant_pour_les_différents_navigateurs">Exemple fonctionnant pour les différents navigateurs</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;header&gt;
  &lt;p&gt;Voici un paragraphe dans un en-tête.&lt;/p&gt;
&lt;/header&gt;

&lt;main&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;p&gt;Mon premier élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;p&gt;Mon deuxième élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/main&gt;

&lt;footer&gt;
  &lt;p&gt;Et un paragraphe de pied de page&lt;/p&gt;
&lt;/footer&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">:-webkit-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">let matchedItems;

try {
  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
} catch(e) {
  try {
    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
  } catch(e) {
    try {
      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
    } catch(e) {
      try {
        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
      } catch(e) {
        console.log('Votre navigateur ne prend pas en charge :is(), :matches() ou :any()');
      }
    }
  }
}

for(let i = 0; i &lt; matchedItems.length; i++) {
  applyHandler(matchedItems[i]);
}

function applyHandler(elem) {
  elem.addEventListener('click', function(e) {
    alert('Ce paragraphe est à l\'intérieur d\'un élément ' + e.target.parentNode.nodeName);
  });
}</pre>

<p>{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}</p>

<h3 id="Simplifier_les_listes_de_sélecteurs">Simplifier les listes de sélecteurs</h3>

<p>La pseudo-classe <code>:matches()</code> permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :</p>

<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
/* utilisent un carré comme puce */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}
</pre>

<p>pourra être remplacée par :</p>

<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
/* utilisent un carré comme puce */
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
  list-style-type: square;
}</pre>

<p>En revanche, le modèle d'usage suivant n'est pas recommandée (cf. <a href="#Issues_with_performance_and_specificity">la section qui suit sur les performances</a>) :</p>

<pre class="brush: css">:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
  list-style-type: square;
}</pre>

<h3 id="Notes" name="Notes">Simplifier les sélecteurs de section</h3>

<p>La pseudo-classe <code>:matches</code> est particulièrement utile lorsqu'on manipule les <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections et en-têtes</a> HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans <code>:matches()</code>) s'avèrerait plutôt compliqué.</p>

<p>Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser <code>:matches()</code>, on obtient ces règles plutôt compliquées :</p>

<pre class="brush: css">/* Niveau 0 */
h1 {
  font-size: 30px;
}
/* Niveau 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Niveau 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
  font-size: 20px;
}
/* Niveau 3 */
/* … j'ai abandonné */
</pre>

<p>Avec <code>:is()</code>, c'est plus simple :</p>

<pre class="brush: css">/* Niveau 0 */
h1 {
  font-size: 30px;
}
/* Niveau 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Niveau 2 */
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Niveau 3 */
:is(section, article, aside, nav)
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 15px;
}</pre>

<h3 id="Éviter_linvalidation_dune_liste_de_sélecteur">Éviter l'invalidation d'une liste de sélecteur</h3>

<p>À la différence des listes de sélecteurs, la pseudo-classe <code>:is()</code> ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.</p>

<pre class="brush: css">:is(:valid, :incompatible) {
  ...
}
</pre>

<p>Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler <code>:valid</code> même si les navigateurs ne prennent pas en charge le sélecteur <code>:incompatible</code>. En revanche :</p>

<pre class="brush: css">:valid, :incompatible {
  ...
}</pre>

<p>L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge <code>:incompatible</code>, même si <code>:valid</code> est bien pris en charge.</p>

<h2 id="Notes_2">Notes</h2>

<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problèmes de performances avec <code>any():</code> et la spécificité</h3>

<p>{{Bug(561154)}} suit un problème de spécificité relatif à <code>:-moz-any()</code>. L'implémentation  place <code>:-moz-any()</code> dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.</p>

<p>Ainsi :</p>

<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
</pre>

<p>sera plus lent que</p>

<pre class="brush: css">.a &gt; .b, .a &gt; .c
</pre>

<p>et cette dernière version sera plus rapide :</p>

<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c</pre>

<p><code>:is()</code> doit permettre de corriger de tels problèmes.</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", "#matches-pseudo", ":is()")}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">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.is")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme <code>is()</code>, avec une spécificité nulle</li>
 <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
</ul>