Experimentando con selectores CSS en una tabla

Los selectores CSS permiten identificar el elemento al cual se pretenden aplicar propiedades diferenciadas.

Experimentando, o jugando, con las posibilidades de los selectores CSS, he comprobado que se puede aplicar formato a cualquier parte de una tabla sin necesidad de utilizar etiquetas diferenciadas, clases o identificadores.

Es decir, que partiendo de una tabla que solo tienen etiquetas <tr> y <td>, se pueden utilizar selectores para identificar las siguientes partes de la tabla:

Selector de tabla completa: table

Selectores de Filas

• Todas las filas: tr
• La tercera fila: tr:nth-child(3)
• Primera fila: tr:nth-child(1) o también tr:first-child
• Última fila: tr:nth-last-child(1) o también tr:last-child
• Filas Pares: tr:nth-child(even) o también tr:nth-child(2n)
• Filas Impares: tr:nth-child(odd) o también tr:nth-child(2n-1)

Selectores de Columnas

• Todas las columnas:  td
• La tercera columna:  td:nth-child(3)
• Primera columna:  td:nth-child(1) o también td:first-child
• Última columna:  td:nth-last-child(1) o también td:last-child
• Columnas Pares:  td:nth-child(even) o también td:nth-child(2n)
• Columnas Impares:  td:nth-child(odd) o también td:nth-child(2n-1)

Selectores de Celdas

• Fila 4ª, celda 6ª:  tr:nth-child(4) td:nth-child(6)
• Celdas vacías:  td:empty
• Celda según su contenido:  td:contains('texto')
  No se puede utilizar directamente en CSS, ya que la especificación de la pseudoclase :contains() fue abandonada por la W3C.
  Sin embargo, sí se puede aplicar a través de JQuery. Por ejemplo, para poner en color rojo los números negativos:

      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script>$( "td:contains('-')" ).css( "color", "red" );</script>

Aquí se puede ver la demo: http://codepen.io/lmrichart/pen/MKaNwg

Aquí se puede ver la demo: MKaNwg de Luis Miguel Richart (@lmrichart) on CodePen.

Os animo a experimentar con los selectores. Descubriréis que tienen muchísimas más posibilidades de las que puede parecer.