La :matchespseudo-classe est décrite comme une pseudo-classe fonctionnelle par les spécifications officielles CSS Selectors Level 4. Cela ne sert à rien en soi, sauf à alléger certains sélecteurs complexes en leur permettant d'être regroupés. D'une certaine manière, nous pouvons penser :matchescomme du sucre syntaxique.
En gros, cela vous évite de répéter un sélecteur composé lorsqu'il n'y a qu'un seul élément qui varie. Je pense que c'est non seulement plus rapide à écrire mais aussi plus rapide à analyser pour les navigateurs, mais je n'ai pas d'informations solides à ce sujet, donc pour autant que je sache, cette pseudo-classe ne fait rien de plus que d'aider à l'écriture des sélecteurs.
Syntaxe
:matches( selector(, selector)* ):matches()accepte une liste de sélecteurs valides comme argument. Aimer:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Cela rend certains sélecteurs complexes beaucoup plus faciles à écrire, par exemple:
:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )Et moins répétitif:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Notez que :matches()cela ne peut pas être imbriqué et ne fonctionne pas avec :not(). Aucun des sélecteurs suivants ne fonctionnera:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Alerte nerd
Les spécifications indiquent que les combinateurs (par exemple ~, >…) ne sont pas autorisés dans le sélecteur passé dans le profil rapide, mais seront dans le profil complexe. Pour faire simple, le profil rapide sera la première (et la dernière possible) implémentation des spécifications, tandis que le profil complexe raconte un futur hypothétique parfait où les performances importent peu.
Mise à jour juin 2015: Je ne sais plus à quel point le paragraphe ci-dessus est précis. La spécification que nous avons liée a changé et cette partie a disparu. Nous avons donc supprimé le lien.
Imiter le comportement avec Sass
Il est possible de simuler un comportement similaire avec Sass (ou n'importe quel préprocesseur CSS d'ailleurs):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Cela crée le sélecteur équivalent de :matches()en exploitant l'imbrication des sélecteurs. Vous pouvez même créer une sorte de fonction pour automatiser cela à un niveau supérieur, mais c'est hors de portée ici.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 88 | 78 | Non | 88 | 14 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Remarque: puisque CSS rejette le sélecteur entier lorsqu'il y a une partie qu'il ne comprend pas, vous devez les séparer pour que cela fonctionne partout. Par exemple, si vous êtes toujours
/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )