CSS3 nous apporte son lot de nouveautés, et parmi elles, un petit nouveau bien prometteur, et qui pourrait nous permettre pas mal d’économie de lignes de code.
Découvrons la pseudo-classe :any() ensemble, voyons comment il est possible de l’utiliser aux travers d’exemples plus ou moins pertinents (on va essayer de le rester :p)

:any(), mais qu’est-ce donc que cette chose là ?

:any() est une pseudo-classes qui permet de factoriser : ça ne vous rappelle pas les maths ? 🙂
Le principe est le suivant : regrouper plusieurs éléments HTML afin d’éviter la multiplication de sélecteurs similaires.

Sa syntaxe de base est la suivante.

:any( selector[, selector]* )

Ainsi, à la place de :

.inside p,
.inside ul,
.inside blockquote {
margin-left: 2em;
}

on pourra écrire :

.inside :any(p, ul, blockquote) {
margin-left: 2em;
}

J’espère que cet exemple de code est parlant pour vous.
Voyons d’autres exemples, peut-être que ça vous parlera davantage.

Cette pseudo-classe étant encore expérimentale, il conviendra d’utiliser les préfixes de chaque navigateur (-moz-, -webkit-, -o- et -ms-).
Pour le moment, seuls Firefox 4+, Chrome 12+ (à vérifier) et Safari 5.1+ (à vérifier) semblent avoir implémenté la chose.

Quelques exemples d’utilisation

Exemple « system » de Firefox

Firefox implémente cette pseudo-classe depuis Firefox 4 si je ne fais pas erreur.
En même temps que de proposer des styles par défaut pour de nombreux éléments HTML5, cette version de Firefox prévoyait déjà l’utilisation multiple de H1.
Les styles suivants sont appliqués pour prévoir l’imbrication de H1 et donc son niveau dans le DOM.

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

Cette technique permet de donner à un h1 un corps de texte différent en fonction du nombre de parents de cet élément.
Pour le niveau 2 par exemple, le corps de texte de 20px sera attribué si le h1 se trouve enfant de section et article, ou enfant de section et section, etc.

Exemple de factorisation des évènements

Il vous est certainement arrivé à de nombreuses reprises d’avoir le même effet lors d’un :hover et d’un :focus.
Votre code CSS ressemble donc souvent à cela :

header nav li a:hover,
header nav li a:focus {
/* mes styles */
}

Il est possible de simplifier ce sélecteur ainsi :

header nav li a:any(:hover, :focus) {
/* mes styles */
}

Voir l’exemple.

À peine arrivée…

J’ai cru voir une information passer entre le début de la rédaction de cet article, et aujourd’hui, mais je ne sais plus où (quelque part chez Mozilla) : apparemment :any() aurait changé de nom et serait maintenant une pseudo-classe de niveau 4 (entendez CSS4).
Elle s’appellerait désormais : :matches()

Sa construction pourrait donc changer entre temps, mais sachez d’ores et déjà que la chose existe 😉