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

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).

Artículos relacionados

Medidas usuales de pantallas de ordenadores y móvi... Medidas pantallas de ordenador Pequeñas (portátiles y pantallas antiguas): 1024x600 Medianas: 1280x720 Grandes: 1400x900, 1600x1200 ... M...
Apuntes librería JavaScript 3D Three.js Este fin de semana, y aprovechando las fiestas Navideñas, me he puesto a curiosear la librería Three.js Como normalmente tengo la cabeza casi llena de...
Overflow vertical en html Si tenemos una capa 'div' con unas determinadas medidas, nos puede interesar que si su contenido sobrepasa la capa que lo contiene, se muestren unas b...
Taller de posicionamiento web Hay diversos métodos para posicionar una página web en buscadores, o podríamos decir directamente, en Google. SEM, SEO, pay per click.. unos términos ...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*