Content content CSS - применять стиль только в том случае, если контент доступен

Возможно ли, чтобы стиль css знал о том, имеет ли элемент, к которому он применяется, какой-то контент или нет? В настоящее время я использую таблицы (вынужденные, поскольку конечный пользователь использует cms для создания страниц) с помощью css для каждой ячейки, так как

<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>

Как показано, существует вероятность, что ячейка таблицы оставлена ​​пустой. Есть ли способ сделать "someClass" осведомленным об этом и не применять стиль к этой ячейке?

Я уверен, что есть некоторые js-хаки, которые я мог бы применить, но мне интересно, возможно ли это с помощью чистого css. Длинный выстрел?

Спасибо.

Ответы

Ответ 1

Просто используйте псевдокласс типа :empty, например:

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

Как утверждает Петр Марек, он не очень надежный, как кросс-браузерное решение, поэтому, если вы должны поддерживать старые браузеры (IE8 и старше), вам понадобится JS (что вы, вероятно, можете выяснить сами). В противном случае приведенное выше правило CSS будет работать нормально.

Вы можете найти совместимость браузера :not() и :empty здесь

Ответ 2

Единственное, что я могу думать о том, что касается вашего вопроса, это psuedo-классы, такие как пустые. Вот пример:

<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>

В современных браузерах вы увидите, что пустые ячейки синие, а ячейки с содержимым - красные. Ключ здесь - первая строка CSS,.cell: not (: empty). Это применимо к CSS, если у элемента нет класса psuedo: empty.

Ответ 3

Нет, с чистым кросс-браузером css это не так. Вам нужно будет отредактировать свои cms или использовать javascript.