blob: 8e5921184f89129bb06c8547ddc2908855bd35bc (
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
|
---
title: ':defined'
slug: 'Web/CSS/:defined'
tags:
- CSS
- Diseño
- Pseudo-clase
- Referencia
- Web
translation_of: 'Web/CSS/:defined'
---
<div>{{ CSSRef }}</div>
<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:defined</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento que se haya definido. Esto incluye cualquier elemento estándar integrado en el navegador y elementos personalizados que se hayan definido correctamente (es decir, con el método {{domxref("CustomElementRegistry.define()")}}).</p>
<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento definido */
:defined {
font-style: italic;
}
/* Selecciona cualquier instancia de un elemento personalizado específico */
simple-custom:defined {
display: block;
}
</pre>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Los siguientes fragmentos están tomados de nuestra demostración <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">Pseudo-clase-definida</a> (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">ver también en directo</a>).</p>
<p>En esta demostración, definimos un elemento personalizado trivial muy simple:</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>Luego inserta una copia de este elemento en el documento, junto con un <code><p></code> estándar:</p>
<pre class="brush: html"><simple-custom text="Texto de ejemplo del elemento personalizado"></simple-custom>
<p>Texto de ejemplo de párrafo estándar</p></pre>
<p>En el CSS primero incluimos las siguientes reglas:</p>
<pre class="brush: css">/* Dar a los dos elementos fondos distintivos */
p {
background: yellow;
}
simple-custom {
background: cyan;
}
/* Tanto el elemento personalizado como el incorporado tienen texto en cursiva */
:defined {
font-style: italic;
}</pre>
<p>A continuación, proporcione las dos reglas siguientes para ocultar las instancias de nuestro elemento personalizado que no están definidas y las instancias que se definen como elementos de nivel de bloque:</p>
<pre class="brush: css">simple-custom:not(:defined) {
display: none;
}
simple-custom:defined {
display: block;
}</pre>
<p>Esto es útil si tiene un elemento personalizado complejo que demora un tiempo en cargarse en la página — es posible que desee ocultar las instancias del elemento hasta que la definición esté completa, para que no terminen con feos destellos de elementos sin estilo en la página</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</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">Compatibilidad con navegadores</h2>
<div>
<p>{{Compat("css.selectors.defined")}}</p>
</div>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/en-US/docs/Web/Web_Components">Componentes web</a></li>
</ul>
|
