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

Listados y contenidos multicolumna con CSS3 Qué tiempos aquellos cuando para poner contenidos multicolumnas en una página web, nos peleábamos con las listas multicolumna. Mediante márgenes, padd...
CodeIgniter – Debug e información de forma s... CodeIgniter proporciona una clase que facilita la programación. Activando esta clase desde nuestro controlador, en el momento de mostrar la vista, lis...
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...
Comprobar enlaces rotos El tener una página web con todos los enlaces correctos es mas importante de lo que se cree. De ello depende en gran medida que buscadores como Google...

Deja un comentario

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

*