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_only-child/index.html | 136 ++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 files/es/web/css/_colon_only-child/index.html (limited to 'files/es/web/css/_colon_only-child/index.html') diff --git a/files/es/web/css/_colon_only-child/index.html b/files/es/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..c11051748e --- /dev/null +++ b/files/es/web/css/_colon_only-child/index.html @@ -0,0 +1,136 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :only-child de CSS representa un elemento sin hermanos. Esto es lo mismo que :first-child:last-child o :nth-child(1):nth-last-child(1), pero con una especificidad menor.

+ +
/* Selecciona cada <p>, pero solo si es el */
+/* único hijo de su padre */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<main>
+  <div>
+    <i>Soy un hijo único y solitario.</i>
+  </div>
+
+  <div>
+    <i>Yo tengo hermanos.</i><br>
+    <b>¡Yo también!</b><br>
+    <span>Yo también tengo hermanos, <span>pero este es un hijo único.</span></span>
+  </div>
+</main>
+ +

CSS

+ +
main :only-child {
+  color: red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico','100%',180)}}

+ +

Ejemplo de lista

+ +

HTML

+ +
<ol>
+  <li>Primero
+    <ul>
+      <li>Esta lista tiene solo un elemento.
+    </ul>
+  </li>
+  <li>Segundo
+    <ul>
+      <li>Esta lista tiene tres elementos.
+      <li>Esta lista tiene tres elementos.
+      <li>Esta lista tiene tres elementos.
+    </ul>
+  </li>
+<ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_de_lista', '100%', 210)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}
+ Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+
+ + +

{{Compat("css.selectors.only-child")}}

+
+
+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf