CSS: selector de primer hijo

0

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 primer hijo

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

describir

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

sintaxis

La sintaxis para el selector :active CSS es:

element:first-child { style_properties }

parámetro o parámetro

elemento es el primer elemento de ese tipo entre sus elementos principales. style_properties Estilos CSS aplicados al primer elemento secundario.

notas

  • El selector :first-child es una pseudoclase que le permite apuntar a un elemento que es el primer hijo de su padre.
  • Consulte también los selectores :last-child, :nth-child, :nth-last_child y :only-child.
  • En IE8, si un elemento se inserta dinámicamente al hacer clic en un enlace, el estilo :first-child no se aplica hasta que el enlace pierde el foco.

Compatibilidad del navegador

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

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

ejemplo

Discutiremos el selector :first-child a continuación, explorando un ejemplo de cómo usar este selector en CSS para aplicar estilos al primer elemento.

con Etiqueta

Veamos un ejemplo de CSS :first-child donde aplicamos el selector :first-child a Marcos.

CSS se ve así:

span:first-child { font-weight: bold; color: red; }

HTML se ve así:

<div>
  <p>Here are 2 sites: <span>prograrmaplus.com</span> and <span>checkyourmath.com</span>.</p>
</div>

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

En este :ejemplo del primer hijo, el primer El texto “prograrmaplus.com” dentro de la etiqueta aparecerá en negrita en rojo.el segundo El texto “checkyourmath.com” en el marcado no tiene el estilo del selector :first-child.

con

Etiqueta

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

Etiqueta.

CSS se ve así:

p:first-child { color: blue; }

HTML se ve así:

<div>
  <p>This is the first paragraph written by prograrmaplus.com.</p>
  <p>This is the second paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así (el selector :first-child establecerá

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

En este :ejemplo del primer hijo, el primer

El color del texto dentro del marcador será azul.el segundo

Las etiquetas no están diseñadas por el selector :first-child.

con

Etiqueta

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

Etiqueta.

CSS se ve así:

tr:first-child { background: yellow; }

HTML se ve así:

<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>prograrmaplus.com</td>
    <td>Technical reference site</td>
  </tr>
  <tr>
    <td>checkyourmath.com</td>
    <td>Math calculation site</td>
  </tr>
  <tr>
    <td>bigactivities.com</td>
    <td>Kids activity site</td>
  </tr>
</table>

El resultado se verá así (el selector :first-child establecerá

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

En este ejemplo de CSS :first-child, la primera línea (es decir: el primer

etiqueta) tendrá un color de fondo amarillo. El selector :first-child no aplica estilo a todas las demás filas de la tabla.