5.1.1. —perdido, buscando el diseño ideal

Seleccionando columnas con :first-child y la propiedad color en COLGROUP

Seleccionar columnas con :nth-child() no es lo mejor. Que TD no pueda heredar color de COLGROUP es contraproducente.

Sobre los estilos que se pueden aplicar a COL y COLGROUP, más la no herencia de la propiedad color : Elements col i colgroup @ a.css.

Ya que las celdas (de una tabla / TABLE) no pueden heredar color de COLGROUP o COL, el autor comenta:

En resum, fins que no es pugui utilitzar un selector del tipus :nth-child() s’haurà d’emprar classes per cada cel·la de la columna.

Traducido: usar el selector :nth-child() o clases para aplicar estilos a una columna.

Usar clases no me parece la mejor opción. Si fuera para destacar una celda en particular tendría sentido, pero en este caso el verdadero elemento estructural es la columna. El elemento que debería ser de una determinada clase es COLGROUP o COL.

Por otro lado, no es necesario esperar implementaciones de :nth-child() cuando ya tenemos varias de :first-child y selector de adjacentes. Suponiendo una tabla de n filas y 3 columnas, y queremos que el texto de la segunda columna sea verde, alcanzaría con td:first-child + td {color: green }. Ejemplo 1.

Claro que un problema es que se necesita tener la seguridad que la cantidad de columnas (antes de la columna a resaltar) nunca cambie.

Por otro lado, hay un problema que afectaría tanto si usaramos el método de :nth-child() como el de :first-child: ¿a cuantos elementos equivale un celda con un colspan diferente de 1?. Suponiendo el siguiente extracto de una tabla:

<tr>
  <td> Celda 1 </td>
  <td> Celda 2 </td>
  <td> Celda 3 </td>
</tr>

<tr>
  <td colspan="2"> Celda 1 + 2 </td>
  <td> Celda 3 </td>
</tr>

Ejemplo 2.

Pero aún hay más. Si se supone que sólo podemos definir el color de fondo de una columna, estaríamos rompiendo con una de las reglas de CSS: si definimos el color de fondo, debemos definir el color del texto. Ejemplo 3.

Publicado el 21 de febrero de 2006 en las categorías CSS, HTML

7 comentarios. Agregá el tuyo →

mini-d

A lo largo de este tiempo he visto pocas aplicaciones de ubicar colores a una columna. El trabajo siempre se lo lleva las filas.

Colorear filas intermedias se me escapa ya. Yo utilizo una clase para no tener que romperme más la cabeza con otras cosas que, en definitiva, no funcionan en muchos navegadores. Cuando sean soportadas, será cambiar un par de cositas al CSS, borrar las class y listo :)

22 de febrero de 2006

Federico

En algunos calendarios, los domingos van en color rojo. ;)
Igualmente, según he visto, el soporte para COLGROUP debería ser perfecto [edit] pero resultó ser patético.

22 de febrero de 2006

are

Ahí has estado fino :)
Para los casos con colspan (suponiendo una regla base del tipo :first-child+td+td se podria añadir un selector tipo :first-child[colspan="2"]+td
definiendo los mismos estilos para ambos y una regla a parte para resetear la celda desplazada con :first-child[colspan="2"]+td+td

Esto supone saber a priori la estructura que va a tener la tabla, claro. Para tablas complejas con colspan variables se complica el tema

El problema de la indeterminación de número de columnas se puede solucionar con un CSS dinámico. Si la tabla lo es el CSS también puede serlo (aunque sólo sea esta regla)

El problema del el verdadero elemento estructural es la columna que comentas no lo veo exactamente así.
Conceptualmente tienes razón ya que es una matriz con filas y columnas pero la estructura real del HTML no es así, las filas són la estructura y las columnas són más bien un metadato estructural . (aquí me meto en un tema espinoso)

Para el tema color/background-color es sólo una adverténcia de verificación manual. Si el validador pudiera ir determinando el color/background-color heredado se podria llegar a determinar el grado de contraste de igual forma que si estuvieran los dos declarados en la misma regla.

22 de febrero de 2006

Federico

JA! ¿Me creerías si te digo que ni se me cruzó por la mente el selector de atributos? Triste de mí.

Sobre la columna como estructura, lo digo especificamente por el uso de class. Me parece que cuando le agregas una clase a todas las celdas de una columna, en realidad querés seleccionar la columna — agregarle una clase a cada celda me parece más un hack :( —.

Sobre color/background-color: conflicto con las hojas de estilo de usuario ;) . Si tenemos que ser precavidos en todos los elementos, ¿por qué no con COLGROUP?. Sí, una User CSS que se acuerde de COLGROUP sólo existe en realidades alternativas, pero no deja de ser una contradicción con una de las reglas de CSS. :)

22 de febrero de 2006

a.css, esbudellant estàndards » Elements col i colgroup

[…] En Federico amplia les possibilitats amb el post Seleccionando columnas con :first-child y la propiedad color en colgroup […]

22 de febrero de 2006

Rodrigo

Excelente ejemplo de selectores adyacentes, MAN.

Respecto a saber la estructura del arbol del documento con seguridad … te iba a decir que podés usar un poquito de DOM, pero me vas a putear, asi que mejor me callo :P

23 de febrero de 2006

a.css, esbudellant estàndards » Estilar columnes d’una taula

[…] Des que en Federico va donar una solució i la vem polir als comentaris he estat mirant una manera de solucionar el tema per Internet Explorer 6 que no demani afegir aquest extra. Al final m’he decantat per modificar l’arbre DOM. […]

28 de febrero de 2006

Agregá tu comentario

Agregá tu comentario

© Federico Martín Panicobpm230 (arroba) gmail (punto) com