CSS: selector de último hijo

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.

(Visited 12 times, 1 visits today)