Aplicar estilos CSS a um elemento, dependendo de seus elementos filhos

É possível definir um estilo CSS para um elemento, que será aplicado apenas se o elemento correspondente contiver um elemento específico (como o item filho direto)?

Eu acho que isso é melhor explicado usando um exemplo.

Nota : Estou tentando estilizar o elemento pai , dependendo de quais elementos filho ele contém.

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

Nota 2 : Eu sei que posso conseguir isso usando javascript, mas me perguntei se isso seria possível usando alguns recursos CSS desconhecidos (para mim).

Tanto quanto sei, o estilo de um elemento pai com base no elemento filho não é um recurso disponível do CSS. Você provavelmente precisará de scripts para isso.

Seria maravilhoso se você pudesse fazer algo como div[div.a]ou div:containing[div.a]como você disse, mas isso não é possível.

Você pode considerar considerar o jQuery . Seus seletores funcionam muito bem com tipos 'contendo'. Você pode selecionar a div, com base no conteúdo filho e, em seguida, aplicar uma classe CSS ao pai, tudo em uma linha.

Se você usa jQuery, algo nesse sentido pode funcionar (não testado, mas a teoria existe):

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

ou

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

combinado com uma classe CSS:

.redBorder
{
    border: 1px solid red;
}

Aqui está a documentação para o seletor jQuery "has" .

Basicamente, não. A seguir, seria o que você procurava em teoria:

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

Infelizmente não existe.

Existem algumas descrições na linha de "por que diabos não". Um bem elaborado por Shaun Inman é muito bom:

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

Além da resposta da @ kp:

Estou lidando com isso e, no meu caso, tenho que mostrar um elemento filho e corrigir a altura do objeto pai de acordo (o dimensionamento automático não está funcionando no cabeçalho de bootstrap por algum motivo, não tenho tempo para depurar) .

Mas, em vez de usar o javascript para modificar o pai, acho que vou adicionar dinamicamente uma classe CSS ao pai e mostrar seletivamente o CSS aos filhos de acordo. Isso manterá as decisões na lógica e não com base em um estado CSS.

tl; dr; aplique os estilos ae bao pai <div>, não ao filho (é claro, nem todos serão capazes de fazer isso. Por exemplo, componentes angulares que tomam decisões por conta própria).

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

No meu caso, tive que alterar o preenchimento de célula de um elemento que continha uma caixa de seleção de entrada para uma tabela que está sendo renderizada dinamicamente com DataTables:

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

Após implementar o seguinte código de linha na função initComplete, consegui produzir o preenchimento correto, que impedia que as linhas fossem exibidas com uma altura anormalmente grande

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

Agora, você pode ver que os estilos corretos estão sendo aplicados ao elemento pai:

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

Essencialmente, esta resposta é uma extensão da resposta da @ KP, mas quanto mais colaboração for implementada, melhor. Em suma, espero que isso ajude outra pessoa, porque funciona! Por fim, muito obrigado @KP por me levar na direção certa!