:any

par 3 contributeurs :

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Résumé

La pseudo-classes :any() vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une alternative pour éviter de réécrire un sélecteur entier alors que seulement une petite partie varie.

Note : Cette pseudo-classe est en voie d'être standardisée dans la spécification CSS Selectors Level 4 sous le nom de :matches(). Il est probable que la syntaxe et le nom de :-préfixe-any() soit amené à changer pour l'adopter dans un proche futur.

Syntaxe

:-moz-any( selector[, selector]* );
:-webkit-any( selector[, selector]* );

Valeurs

selector
Un sélecteur, simple ou multiple, composé d'un sélecteur CSS simple.
Note: Le sélécteur ne peut contenir de combinateur ou de pseudo-éléments.

Exemples

Par exemple, le code CSS suivant :

/* 3 deep (or more) unordered lists use a square */
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;
}

Peut être remplacé par :

/* 3 deep (or more) unordered lists use a square */
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
  list-style-type: square;
}

Cependant, évitez d'utiliser le code suivant (voir la section sur les performances plus bas) :

:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
  list-style-type: square;
}

Notes

Ceci est particulièrement utile en combinaisons les sections et les en têtes HTML 5. Comme <section>, <article>, <aside> et <nav> peuvent être imbriqués, sans :any(), leur appliquer un style peut être beaucoup plus complexe.

Par exemple, sans :any(), appliquer un style à tous les éléments <h1> situés à différents niveaux peut être vraiment compliqué :

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Level 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;
}
/* Level 3 */
/* ... don't even think about it*/

Alors qu'en utilisant : -any(), cela devient facile.

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:-moz-any(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
  font-size: 15px;
}

Problèmes avec les performances et la spécificité

Le bogue 561154 montre un problème avec Gecko où un cas avec :-moz-any() est incorrect. La version 12 de Firefox qui implémente :-moz-any() en la plaçant dans la catégorie des règles universelles, signifie que l'utiliser comme le sélecteur le plus à droite sera plus lent que d'utiliser un ID, une classe ou une étiquette à cette place.

Par exemple :

.a > :-moz-any(.b, .c)

est moins rapide que :

.a > .b, .a > .c

et celui-ci est le plus rapide :

:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c

Compatibilité avec les navigateurs

Fonctionalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base 4.0 (2)-moz- 12.0 (534.30)-webkit- ? ?

5.1.3 (7534.53.10))
-webkit-

Fonctionalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base ? ? ? ? (Oui)5.0.3
-webki-t

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : tregagnon, teoli, louuis
Dernière mise à jour par : tregagnon,