CSS: selector de hijo único

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: selector de hijo único

Este tutorial de CSS explica cómo usar los selectores de CSS llamados : el hijo único Con sintaxis y ejemplos.

describir

El selector CSS :only-child le permite apuntar a un elemento que es el único hijo de su padre.

sintaxis

La sintaxis para el selector de CSS :only-child es:

element:only-child { style_properties }

parámetro o parámetro

elemento El único hijo de un elemento de este tipo dentro de su padre. style_properties Estilos CSS aplicados solo a elementos secundarios.

notas

• El selector :only-child es una pseudoclase que le permite apuntar a un elemento que es el único hijo de su padre.
• Consulte también los selectores :first-child, :last-child, :nth-child y :nth-last-child.

Compatibilidad del navegador

El selector CSS :only-child tiene soporte básico para los siguientes navegadores:

• Aleación de cromo
• androide
• Firefox (Geco)
• Firefox móvil (Geco)
• Internet Explorer 9+ (IE 9+)
• IE Móvil 9+
• Ópera 9.5+
• Ópera Móvil 10+
• Safari (WebKit)
• Safari para móvil

ejemplo

Discutiremos el selector :only-child a continuación, explorando un ejemplo de cómo usar este selector en CSS para aplicar estilos solo a elementos secundarios.

con Etiqueta

Veamos un ejemplo de CSS :only-child donde aplicamos el selector :only-child a Etiqueta.

CSS se ve así:

span:only-child { color: red; font-size: 22px; }

HTML se ve así:

<div>
  <p>Here are 2 sites <span>prograrmaplus.com</span> and <span>checkyourmath.com</span>.</p>
  <p>Here is only 1 site <span>bigactivities.com</span>.</p>
</div>

El resultado se verá así (el selector :only-child establecerá estilo de la etiqueta, como se muestra a continuación):

En este ejemplo de CSS :only-child, el primer

La etiqueta contiene múltiples etiquetas, por lo que estos Las etiquetas no están diseñadas por el selector :only-child.el segundo

La etiqueta contiene solo una etiqueta, por lo que será diseñado por el selector :only-child.la etiqueta de intervalo grandesactividades.com El color del texto aparecerá en letra roja grande.

con

Etiqueta

Veamos un ejemplo de CSS :only-child donde aplicamos el selector :only-child a

Marcos.

CSS se ve así:

p:only-child { background: yellow; }

HTML se ve así:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003. We focus on technologies such as Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS, and the C Language.</p>
</div>
<div>
  <p>The information presented here is suitable for all programmers from beginner to expert.</p>
  <p>We hope you find this information useful and return to our site, as we expand our information base.</p>
</div>

El resultado se verá así (el selector :only_child establecerá

estilo de la etiqueta, como se muestra a continuación):

En este ejemplo de CSS :only-child, el primer