From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/_colon_empty/index.html | 106 +++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 files/es/web/css/_colon_empty/index.html (limited to 'files/es/web/css/_colon_empty') diff --git a/files/es/web/css/_colon_empty/index.html b/files/es/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..d86e01d306 --- /dev/null +++ b/files/es/web/css/_colon_empty/index.html @@ -0,0 +1,106 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{ CSSRef() }}
+ +
La pseudo-clase :empty de CSS representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco). Los comentarios o las instrucciones de procesamiento no afectan si un elemento se considera vacío.
+ +
+ +
+

Nota: En {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} la pseudo-clase :empty fue modificada para actuar como {{CSSxRef(":-moz-only-whitespace")}}, pero ningún navegador actualmente suporta aún esto.

+
+ +
/* Selecciona cualquier <div> que no contenga contenido */
+div:empty {
+  background: lime;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div class="box"><!-- Voy a ser de color lima. --></div>
+<div class="box">Voy a ser de color rosa.</div>
+<div class="box">
+    <!-- Seré de color rosa debido a los espacios en blanco alrededor de este comentario. -->
+</div>
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 300, 80)}}

+ +

Problemas de accesibilidad

+ +

La tecnología de asistencia, como los lectores de pantalla, no puede analizar el contenido interactivo que está vacío. Todo el contenido interactivo debe tener un nombre accesible, que se crea proporcionando un valor de texto para el elemento principal del control interactivo (anclajes, botones, etc.). Los nombres accesibles exponen el control interactivo al árbol de accesibilidad, una API que comunica información útil para las tecnologías de asistencia.

+ +

El texto que proporciona el nombre accesible del control interactivo se puede ocultar mediante una combinación de propiedades que lo eliminan visualmente de la pantalla, pero que la tecnología de asistencia lo puede analizar. Esto se usa comúnmente para botones que dependen solo de un ícono para transmitir el propósito.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS3 Selectors') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("css.selectors.empty")}}

+
-- cgit v1.2.3-54-g00ecf