1 files changed, 115 insertions, 0 deletions
diff --git a/files/es/web/css/_colon_defined/index.html b/files/es/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..8e5921184f
--- /dev/null
+++ b/files/es/web/css/_colon_defined/index.html
@@ -0,0 +1,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>&lt;p&gt;</code> estándar:</p>
+
+<pre class="brush: html">&lt;simple-custom text="Texto de ejemplo del elemento personalizado"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Texto de ejemplo de párrafo estándar&lt;/p&gt;</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>