La pseudo clase first-child
10, 05 de 2006-03-05 de 2006
Este es el primer post de una serie sobre el uso de pseudo clases, pseudo elementos y selectores en css
Esta pseudo clase de css, no soportada por IE6.x os sirve para especificar el primer elemento de una serie que comparta el mismo ascendente. Imaginemos, por ejemplo, una lista con cuatro elementos:
Podríamos aplicar un estilo al primer elemento de la lista (li 1) con el siguiente código css
li:first-child {
definición de estilos;
}
Si lo que deseamos es aplicar un estilo al tercer elemento de la lista (li 3) el código sería el siguiente:
li:first-child +li +li{
definición de estilos;
}
Esto nos podría servir, por ejemplo, para aplicar estilos a columnas en una tabla:
Código css:
td.ejcol {
border: 1px dotted #000;
}
td.ejcol:first-child +td{
background:#ccc;
}
td.ejcol:first-child +td + td{
background:#cc6;
}
Código html:
<table>
<tr>
<td class="ejcol">Celda 1.1</td>
<td class="ejcol">Celda 1.2</td>
<td class="ejcol">Celda 1.3</td>
</tr>
<tr>
<td class="ejcol">Celda 2.1</td>
<td class="ejcol">Celda 2.2</td>
<td class="ejcol">Celda 2.3</td>
</tr>
<tr>
<td class="ejcol">Celda 3.1</td>
<td class="ejcol">Celda 3.2</td>
<td class="ejcol">Celda 3.3</td>
</tr>
</table>
Esto se vería así:
| Celda 1.1 | Celda 1.2 | Celda 1.3 |
| Celda 2.1 | Celda 2.2 | Celda 2.3 |
| Celda 3.1 | Celda 3.2 | Celda 3.3 |
Algunos enlaces de interés para profundizar en el uso de selectores, pseudo clases y pseudo elementos en css son:
