Contenido consciente de CSS: aplique estilo solo si el contenido está disponible

¿Es posible tener un estilo css teniendo en cuenta si el elemento al que se está aplicando tiene algún tipo de contenido o no? Actualmente estoy usando tablas (forzados a ya que el usuario final utiliza para crear páginas cms) con un css para cada celda, como asíContenido consciente de CSS: aplique estilo solo si el contenido está disponible

<table> 
<tr> 
    <td class="someClass">Test value 1</td> 
    <td class="someClass">Test value 2</td> 
</tr> 
<tr> 
    <td class="someClass">Test value 3</td> 
    <td class="someClass"></td> 
</tr> 
</table>

Como muestra, existe la posibilidad de que una celda de la tabla se deja vacío. ¿Hay alguna manera de hacer que "someClass" esté al tanto de esto y no aplicar el estilo a esta celda?

Estoy seguro de que hay algún truco js que podría aplicar, pero me pregunto si es posible con CSS puro. ¿Tiro largo?

Gracias.

Fuente

2012-01-30 mspir

prueba esto 'td: not (: empty)' – mgraph

¿Qué tipo de estilo quieres? Tiene 'empty-cells: hide;' que ocultará los bordes de una celda. –

Gracias chicos. : not (: empty) funciona para mí! – mspir

basta con utilizar el pseudo-clase :empty así:

td.someClass:not(:empty) { 
    /* Styles */ 
}

Como Petr Marek menciona que no es muy fiable como una solución multi-navegador, así que si mosto apoyo navegadores antiguos (IE8 y mayores) usted va a necesita JS (que usted probablemente puede averiguar por sí mismo). De lo contrario, la regla CSS anterior funcionará bien.

Usted puede encontrar la compatibilidad del navegador de :not() y :emptyhere

Fuente

2012-01-30 11:58:10 BoltClock

No, con puro cross-browser css no lo es. Tendrás que editar sus cms o usar javascript.

Fuente

2012-01-30 11:55:30 mreq

Técnicamente, esta respuesta es verdadera. Sin embargo, no muchas personas usan navegadores que carecen de [soporte básico] (https://developer.mozilla.org/en-US/docs/Web/CSS/:not) para ': not' más. –

La única cosa que puedo pensar en que se relaciona con su pregunta es pseudo-clases, tales como vacía. Aquí se muestra un ejemplo:

<html> 
    <head> 
    <title>Example</title> 
    <style type="text/css"> 
     .cell:not(:empty) { 
     background-color: red;  
     } 
     .cell:empty { 
     background-color: blue; 
     } 
    </style> 
    </head> 
    <body> 
    <table><tBody> 
     <tr><td class="cell"></td><td class="cell">Not empty</td></tr> 
     <tr><td class="cell">Not empty</td><td class="cell"></td></tr> 
    </tBody></table> 
    </body> 
</html>

En los navegadores modernos, se verá que las celdas vacías son de color azul y las células con contenido son rojos. La clave aquí es la primera línea de CSS, .cell: not (: empty). Esto aplica el CSS si el elemento no tiene la clase psuedo: vacío aplicado.

Fuente

2012-01-30 12:00:22 Shane

Contenido consciente de CSS: aplique estilo solo si el contenido está disponible

Respuesta

Cuestiones relacionadas