CSS: selector de último 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 último hijo

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

describir

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

sintaxis

La sintaxis para el selector :active CSS es:

element:last-child { style_properties }

parámetro o parámetro

elemento es el último elemento de ese tipo en su elemento padre. style_properties Estilos CSS aplicados al último elemento secundario.

notas

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

Compatibilidad del navegador

El selector CSS :last-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 :last-child a continuación, explorando un ejemplo de cómo usar este selector en CSS para aplicar estilos al último elemento.

con Etiqueta

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

CSS se ve así:

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

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 :last-child establecerá estilo de la etiqueta, como se muestra a continuación):

En este ejemplo de CSS :last-child, el último El texto “checkyourmath.com” dentro de la etiqueta aparecerá en negrita en rojo.Primero El texto en las etiquetas no está diseñado por el selector :last-child.

con

Etiqueta

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

Etiqueta.

CSS se ve así:

p:last-child { color: blue; }

HTML se ve así:

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

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

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

En este ejemplo de CSS :last-child, el último

El color del texto dentro del marcador será azul. :el selector de último hijo no establece el primero

El estilo de la etiqueta.

con

Etiqueta

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

Etiqueta.

CSS se ve así:

tr:last-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 :last-child establecerá

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

En este ejemplo de CSS :last-child, la última línea (es decir: el último

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