Применение стилей 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.

Насколько я знаю, стилизация родительского элемента на основе дочернего элемента не является доступной функцией 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 .

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

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

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

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

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

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

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

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

ТЛ; др; применять 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>

В моем случае мне пришлось изменить заполнение ячеек элемента, который содержал флажок ввода для таблицы, которая динамически отображается с помощью DataTables:

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

После реализации следующего строкового кода в функции initComplete я смог создать правильный отступ, который исправил отображение строк с аномально большой высотой

 $('tbody td:has(input.a)').css('padding', '0px');

Теперь вы можете видеть, что к родительскому элементу применяются правильные стили:

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

По сути, этот ответ является расширением ответа @ KP, но чем больше сотрудничества в реализации этого, тем лучше. Подводя итог, я надеюсь, что это помогает кому-то еще, потому что это работает! Наконец, большое спасибо @KP за то, что вы направили меня в правильном направлении!