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

Возможно ли, чтобы стиль css знал, имеет ли элемент, к которому он применяется, какой-то контент или нет? Я в настоящее время с помощью таблиц (вынужденных, так как конечный пользователь использует CMS для создания страниц) с помощью CSS для каждой ячейки, а такContent aware 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. Длинный выстрел?

Спасибо.

источник

2012-01-30 mspir

попробуйте этот 'td: not (: empty)' – mgraph

Какой стиль вы хотите? У вас есть «empty-cells: hide;», которые будут скрывать границы ячейки. –

Спасибо, ребята. : not (: empty) работает для меня! – mspir

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

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

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

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

источник

2012-01-30 11:58:10 BoltClock

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

источник

2012-01-30 11:55:30 mreq

Технически этот ответ верен. Однако не многие люди используют браузеры, у которых нет [базовой поддержки] (https://developer.mozilla.org/en-US/docs/Web/CSS/:not) для ': not'. –

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

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

источник

2012-01-30 12:00:22 Shane

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

ответ

Смежные вопросы