-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
54 lines (38 loc) · 1.54 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
---
title: ":has"
slug: Web/CSS/:has
---
{{CSSRef}}
La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:has()`** permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).
Cette pseudo-classe `:has()` prend en paramètre une liste de sélecteurs.
> [!NOTE]
> Pour des raisons de performances et dans la spécification actuelle, [`has()` n'est pas classé comme un sélecteur dynamique](https://drafts.csswg.org/selectors/#live-profile) et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.
```js
/* Avec cette ligne de JavaScript, on récupère */
/* tous les éléments <a> qui ont un fils direct */
/* qui est un élément <img> */
/* Attention, actuellement cette fonction n'est */
/* pas prise en charge par les navigateurs et */
/* n'est pas conçue pour fonctionner dans les */
/* feuilles de style */
var test = document.querySelector("a:has(> img)");
```
## Syntaxe
```
:has(liste_selecteurs) { proprietes }
```
## Exemples
Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :
```css
a:has(> img) {
}
```
Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :
```css
h1:has(+ p) {
}
```
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}