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

Curso de HTML5 en formato videotutorial Aquí os dejamos el primero de los videotutoriales que componen el curso de HTML5 En el siguiente enlace podréis encontrar el resto de vídeos cr...
Optimizar ficheros css para disminuir el tiempo de... Como ya explicamos en una artículo anterior, en ocasiones encontramos problemas que afectan al tiempo de carga de nuestra web. Llamamos a muchas hojas...
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 *

*