Применение стилей CSS к элементу в зависимости от его дочерних элементов

Можно ли определить стиль CSS для элемента, который применяется только в том случае, если соответствующий элемент содержит определенный элемент (как прямой дочерний элемент)?

Я думаю, что это лучше всего объяснить с помощью примера.

Примечание. Я пытаюсь создать стиль родительского элемента, в зависимости от того, какие дочерние элементы он содержит.

<style>
  /* note this is invalid syntax. I'm using the non-existing
   ":containing" pseudo-class to show what I want to achieve. */
  div:containing div.a { border: solid 3px red; }
  div:containing div.b { border: solid 3px blue; }
</style>

<!-- the following div should have a red border because
     if contains a div with class="a" -->
<div>
  <div class="a"></div>
</div>

<!-- the following div should have a blue border -->
<div>
  <div class="b"></div>
</div>

Примечание 2. Я знаю, что могу добиться этого с помощью javascript, но мне просто интересно, возможно ли это с помощью некоторых неизвестных (для меня) функций CSS.

Ответы

Ответ 1

Насколько мне известно, стилизация родительского элемента на основе дочернего элемента не является доступной функцией CSS. Для этого вам, вероятно, понадобится сценарий.

Было бы замечательно, если бы вы могли сделать что-то вроде div[div.a] или div:containing[div.a], как вы сказали, но это невозможно.

Возможно, вы захотите рассмотреть jQuery. Его селекторы очень хорошо работают с типами "содержащие". Вы можете выбрать div на основе его дочернего содержимого, а затем применить класс CSS к родительскому объекту в одной строке.

Если вы используете jQuery, что-то по строкам этого может работать (непроверено, но существует теория):

$('div:has(div.a)').css('border', '1px solid red');

или

$('div:has(div.a)').addClass('redBorder');

в сочетании с классом CSS:

.redBorder
{
    border: 1px solid red;
}

В документации для jQuery "есть" селектор.

Ответ 2

В принципе, нет. Следующее было бы тем, что вы были в теории:

div.a < div { border: solid 3px red; }

К сожалению, этого не существует.

Есть несколько рецензий по строкам "почему, черт возьми, нет". Хорошо сформированный Шон Инман очень хорош:

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

Ответ 3

В ответ на ответ @kp:

Я имею дело с этим и в моем случае, я должен показать дочерний элемент и правильно исправить высоту родительского объекта (автоматическая калибровка не работает в заголовке начальной загрузки по какой-то причине у меня нет времени для отладки).

Но вместо того, чтобы использовать javascript для изменения родителя, я думаю, что я динамически добавлю класс CSS к родительскому и CSS-выборочно покажу детям. Это будет поддерживать решения в логике и не основываться на состоянии CSS.

tl; dr; применить стили a и b к родительскому <div>, а не к ребенку (конечно, не все смогут это сделать, т.е. Angular компоненты, принимающие решения самостоятельно).

<style>
  .parent            { height: 50px; }
  .parent div        { display: none; }
  .with-children     { height: 100px; }
  .with-children div { display: block; }
</style>

<div class="parent">
  <div>child</div>
</div>

<script>
  // to show the children
  $('.parent').addClass('with-children');
</script>