MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

This translation is incomplete. Please help translate this article from English.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Sumari

La pseudo-classe :any() permet construir ràpidament conjunts de selectors similars mitjançant l'establiment de grups dels que qualsevol dels elements inclosos coincidiran. Aquesta és una alternativa a haver de repetir el selector sencer per l'element que varia.

Nota : Aquesta pseudo-classe està en curs de ser estandarditzada en CSS Selectors Level 4 sota el nom :matches(). És probable que la sintaxi i el nom de :-vendor-any() seran canviats perquè es reflecteixi en un futur proper.

Sintaxi

:-moz-any( <selector># ) { style properties }
:-webkit-any( <selector># ) { style properties }

Valors

selector
Un selector. Això pot ser un selector simple o un selector múltiple compost de selectors simples CSS 3 i pot incloure el combinador descendent.
Nota: Els selectors no poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.

Exemples

Per exemple, el següent CSS:

/* 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;
}

Pot substituir-se per:

/* 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;
}

No obstant això, no utilitzeu el següent: (Veure la secció sobre el rendiment més endavant.)

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

Notas

Això és particularment útil quan es tracta de seccions i encapçalaments en HTML5. Des <section>, <article>, <aside> i <nav> es poden niar, sense :any(), l'estil d'aquests perquè coincideixin entre si pot ser difícil.

Per exemple, sense :any(), donar estil a tot els elements <h1> a diferents profunditats podria ser molt complicat:

/* 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*/

Usant :-any(), és molt més fàcil:

/* 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;
}

Problemes amb el rendiment i l'especificitat

Bug 561154 registra un problema amb Gecko en el qual l'especificitat de: -moz-any () és incorrecta. La implementació actual (com Firefox 12) posa: -moz-any () en la categoria de regles universals, la qual cosa significa que usar-ho com el selector dret serà més lent que usar un ID, una classe o una etiqueta com el selector dret.

Per exemple:

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

és més lent que:

.a > .b, .a > .c

i el següent és més ràpid:

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

Navegadors compatibles

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Suport bàsic 4.0 (2)-moz 12.0 (534.30)-webkit ? ? 5
-webkit
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic ? (Yes)-webkit ? ? ? 5
-webkit

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,