-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
230 lines (186 loc) · 5.64 KB
/
index.md
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
---
title: ":is()"
slug: Web/CSS/:is
l10n:
sourceCommit: 62681c2ef134407009c5c11fa679db1f485e016d
---
{{CSSRef}}
La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:is()`** prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.
> [!NOTE]
> Cette pseudo-classe avait d'abord été intitulée `:matches()` (puis `:any()`), avant d'être renommée en `:is()` avec [le ticket CSSWG n°3258](https://github.com/w3c/csswg-drafts/issues/3258).
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}}
Les pseudo-éléments ne peuvent pas être utilisés dans la liste de sélecteurs passée à `:is()`.
### Différence entre `:is()` et `:where()`
Contrairement à [`:where()`](/fr/docs/Web/CSS/:where) dont la sp��cificité vaut 0, `:is()` participe à la spécificité du sélecteur (elle prend la spécificité de son argument le plus spécifique)). Vous pouvez observer cette différence sur [l'exemple de la page sur `:where()`](/fr/docs/Web/CSS/:where#examples).
### Analyse permissive de la liste des sélecteurs
`:is()` et `:where()` acceptent une liste permissive de sélecteurs ([voir la spécification](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list)).
En général, lorsqu'on utilise une liste de sélecteurs, celle-ci devient intégralement invalide dès que l'un des sélecteurs est invalide. En utilisant `:is()` ou `:where()`, si la liste contient un sélecteur incorrect ou qui n'est pas pris en charge, celui-ci sera ignoré et les autres seront utilisés.
```css
:is(:valid, :non-pris-en-charge) {
/* … */
}
```
Le fragment qui précède sera interprété correctement et ciblera `:valid`, même pour les navigateurs qui ne prennent pas en charge `:non-pris-en-charge`, alors que :
```css
:valid,
:non-pris-en-charge {
/* … */
}
```
Sera ignoré pour les navigateurs qui ne prennent pas en charge `:non-pris-en-charge`, même s'ils prennent en charge `:valid`.
## Exemple
### Simplifier une liste de sélecteurs
La pseudo-classe `:is()` peut grandement simplifier les sélecteurs CSS. Prenons par exemple, ce fragment CSS :
```css
/* Pour les listes non-ordonnées de 3 niveaux (ou plus), on utilisera un carré */
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;
}
```
On pourra remplacer ce bloc avec :
```css
/* Pour les listes non-ordonnées de 3 niveaux (ou plus), on utilisera un carré */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
list-style-type: square;
}
```
### Simplifier les sélecteurs de section
La pseudo-classe `:is()` est notamment utile lorsqu'on manipule [les sections et titres HTML](/fr/docs/Web/HTML/Element/Heading_Elements). En effet, les éléments [`<section>`](/fr/docs/Web/HTML/Element/section), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<aside>`](/fr/docs/Web/HTML/Element/aside) et [`<nav>`](/fr/docs/Web/HTML/Element/nav) sont généralement imbriqués les uns avec les autres. Sans `:is()`, leur mise en forme à différents niveaux peut s'avérer délicate.
Ainsi, sans `:is()`, il serait très compliqué de cibler tous les éléments [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements) situés à différentes profondeurs :
```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 */
/* Nous n'osons même pas y penser */
```
Avec `:is()`, c'est plus facile :
```css
/* Niveau 0 */
h1 {
font-size: 30px;
}
/* Niveau 1 */
:is(section, article, aside, nav) h1 {
font-size: 25px;
}
/* Niveau 2 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
font-size: 20px;
}
/* Niveau 3 */
:is(section, article, aside, nav)
:is(section, article, aside, nav)
:is(section, article, aside, nav)
h1 {
font-size: 15px;
}
```
### `:is()` ne cible pas les pseudo-éléments
La pseudo-classe `:is()` ne permet pas de cibler les pseudo-éléments. Aussi, plutôt que d'écrire :
```css example-bad
un-element:is(::before, ::after) {
display: block;
}
```
ou ceci :
```css example-bad
:is(un-element::before, un-element::after) {
display: block;
}
```
On écrira plutôt :
```css example-good
un-element::before,
un-element::after {
display: block;
}
```
## Syntaxe
```css-nolint
:is(<forgiving-selector-list>) {
/* … */
}
```
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [`:where()`](/fr/docs/Web/CSS/:where) : comme `:is()`, mais avec [une spécificité](/fr/docs/Web/CSS/Specificity) qui vaut 0.
- [Liste de sélecteurs](/fr/docs/Web/CSS/Selector_list)
- [Composants web](/fr/docs/Web/API/Web_components)