Ejemplo first-child – asignar un estilo a la primera columna de una tabla

Comparte:

Twitter

Linkedin

Facebook

Reddit

Supongamos que tenemos la siguiente tabla:

1
2
3
4
5
6

<table id="milistado">
<tr><th>1 cabecera</th><th>2a cabecera</th></tr>
<tr><td>1/1 cotendio</td><td>1/2 cotendio</td></tr>
<tr><td>2/1 cotendio</td><td>2/2 cotendio</td></tr>
<tr><td>3/1 cotendio</td><td>3/2 cotendio</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 *:

1
2

#milistado tr td:first-child { background: #F80; }
#milistado 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).