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

Question

Можно ли определить стиль 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.

Answer 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 "имеет" селектор .

Answer 2

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

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

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

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

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

Answer 3

поверх ответа @ kp:

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

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

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

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