1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
---
title: ':any()'
slug: conflicting/Web/CSS/:is
tags:
- CSS
- Experimental
- Pseudo-classe
- Reference
translation_of: Web/CSS/:is
translation_of_original: Web/CSS/:any
original_slug: Web/CSS/:any
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> 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 méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p>
<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */
/* d'un aside ou d'un nav */
/* actuellement pris en charge avec les préfixes */
/* -moz- et -webkit- */
:-moz-any(section, article, aside, nav) h2 {
font-size: 4.5rem;
}
:-webkit-any(section, article, aside, nav) h2 {
font-size: 4.5rem;
}
</pre>
<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>selector</code></dt>
<dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd>
</dl>
<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3>
<p>Par exemple, le code CSS suivant :</p>
<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */
dans certains cas */
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é par :</p>
<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */
dans certains cas */
:-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;
}</pre>
<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p>
<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
list-style-type: square;
}</pre>
<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3>
<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p>
<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</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 */
/* ... même pas la peine d'y penser */
</pre>
<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p>
<pre class="brush: css">/* Niveau 0 */
h1 {
font-size: 30px;
}
/* Niveau 1 */
:-moz-any(section, article, aside, nav) h1 {
font-size: 25px;
}
:-webkit-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;
}
:-webkit-any(section, article, aside, nav)
:-webkit-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;
}
:-webkit-any(section, article, aside, nav)
:-webkit-any(section, article, aside, nav)
:-webkit-any(section, article, aside, nav) h1 {
font-size: 15px;
}</pre>
<h2 id="Notes">Notes</h2>
<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3>
<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p>
<p>Par exemple :</p>
<pre class="brush: css">.a > :-moz-any(.b, .c)
</pre>
<p>est moins rapide que :</p>
<pre class="brush: css">.a > .b, .a > .c
</pre>
<p>et celui-ci est rapide :</p>
<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
</pre>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.selectors.any")}}</p>
|
