blob: 9bdc667302ea7459fbb0f6cb30dc8846de20f100 (
plain)
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
|
---
title: ':defined'
slug: 'Web/CSS/:defined'
tags:
- CSS
- Pseudo-classe
- Reference
- Web
translation_of: 'Web/CSS/:defined'
---
<div>{{CSSRef}}</div>
<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:defined</code></strong> représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur et également les éléments personnalisés (<em>custom elements</em>) ayant correctement été définis (c'est-à-dire grâce à la méthode {{domxref("CustomElementRegistry.define()")}}).</p>
<pre class="brush: css no-line-numbers">/* Cette règle cible tout élément défini */
:defined {
font-style: italic;
}
/* Cette règle cible n'importe quelle instance */
/* d'un élément personnalisé donné */
simple-custom:defined {
display: block;
}
</pre>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<p>Les fragments de code qui suivent sont tirés <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">du dépôt <code>defined-pseudo-class</code></a> (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">voir le résultat en <em>live</em></a>).</p>
<p>Pour cette démonstration on définit un élément personnalisé trivial :</p>
<pre class="brush: js">customElements.define('simple-custom',
class extends HTMLElement {
constructor() {
super();
let divElem = document.createElement('div');
divElem.textContent = this.getAttribute('text');
let shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(divElem);
}
})</pre>
<p>On insère une copie de cet élément dans le document, à côté d'un paragraphe classique {{HTMLElement("p")}} :</p>
<pre class="brush: html"><simple-custom text="Le texte de l'élément personnalisé"></simple-custom>
<p>Un paragraphe normal.</p></pre>
<p>Dans la feuille CSS, on inclut les règles suivantes :</p>
<pre class="brush: css">// On utilise deux arrières-plans distincts
// pour ces deux éléments
p {
background: yellow;
}
simple-custom {
display: block;
background: cyan;
}
// On met en italique le texte de ces
// deux éléments
:defined {
font-style: italic;
}</pre>
<p>Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :</p>
<pre class="brush: css">simple-custom:not(:defined) {
opacity: 0;
}
simple-custom:defined {
opacity: 0.75;
text-decoration: underline;
}</pre>
<p>Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en formes sur la page.</p>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
<p>{{Compat("css.selectors.defined")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
<li>{{cssxref(":host")}}</li>
<li>{{cssxref(":host()")}}</li>
<li>{{cssxref(":host-context()")}}</li>
</ul>
|
