CSS first-child y last-child en una tabla o lista

Veamos un ejemplo de cómo asignar estilos a la primera o último objeto de una tabla o lista con el atributo CSS first-child y last-child.

Last-child en una tabla

Supongamos que tenemos la siguiente tabla:

<table>
<tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr>
<tr><td>1/1</td><td>1/2</td><td>/3</td></tr>
<tr><td>2/1</td><td>2/2</td><td>2/3</td></tr>
<tr><td>3/1</td><td>3/2</td><td>3/3</td></tr>
</table>

Y queremos asignar un estilo a la primera columna (1/1 contenido). Y solo a la primera columna.

El estilo que utilizaríamos es *:

tr td:first-child { background: #F80; }
tr td:last-child { background: #F50; }

Con lo que pondríamos de color naranja solamente la primera columna. He añadido también en el ejemplo el uso del seudoelemento CSS last-child, primo hermano de first-child, que lógicamente asigna el estilo al útlimo elemento (en el ejemplo a 3/2 contenido).

El código de ejemplo

First-child en una lista

Ahora veamos el ejemplo de cambiar el formato de los primeros elementos de listas:

<ul>
  <li>Position 1 (First-child)</li>
  <li>Position 2</li>
  <li>Position 3
    <ul>
      <li>Position 3.1 (First-child)</li>
      <li>Position 3.2</li>
    </ul>
  </li>
</ul>

Y aquí tenemos el CSS:

ul li:first-child {
  color: red;
  font-weight: bold;
  text-decoration: underline;
}

El código en acción

Aquí tenéis el código en acción:

See the Pen CSS First-child Last-Child by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Como podéis ver en el ejemplo de la tabla, se colorean las celdas de la primera y última columna, debido al seleccionador first-child y last-child de CSS

Lo mismo ocurre con la lista. Cada primer elemento <li> de las listas, toman el formato indicado en el CSS.

De este modo, podemos asignar atributos a los primeros y últimos elementos de nuestros objetos dentro del código HTML5.

Espero que os sea de utilidad, y que no dejéis de visitar más tutoriales de programación web.

---

Más información

• Selector First Child