Applica gli stili CSS a un elemento in base ai suoi elementi figlio

È possibile definire uno stile CSS per un elemento, che viene applicato solo se l'elemento corrispondente contiene un elemento specifico (come elemento figlio diretto)?

Penso che questo sia meglio spiegato usando un esempio.

Nota : sto cercando di dare uno stile all'elemento genitore , a seconda degli elementi figlio che contiene.

<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 : So di poterlo raggiungere utilizzando JavaScript, ma mi chiedevo solo se ciò fosse possibile utilizzando alcune funzioni CSS (per me) sconosciute.

Per quanto ne so, lo stile di un elemento padre basato sull'elemento figlio non è una funzione disponibile di CSS. Probabilmente avrai bisogno di script per questo.

Sarebbe meraviglioso se potessi fare qualcosa del genere div[div.a]o div:containing[div.a]come hai detto, ma questo non è possibile.

Potresti prendere in considerazione l' idea di guardare jQuery . I suoi selettori funzionano molto bene con tipi "contenenti". Puoi selezionare il div, in base al suo contenuto figlio e quindi applicare una classe CSS al genitore tutto in una riga.

Se usi jQuery, qualcosa del genere potrebbe funzionare (non testato ma la teoria è lì):

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

o

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

combinato con una classe CSS:

.redBorder
{
    border: 1px solid red;
}

Ecco la documentazione per il selettore "ha" di jQuery .

Fondamentalmente no. Quanto segue sarebbe quello che stavi cercando in teoria:

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

Sfortunatamente non esiste.

Ci sono alcuni commenti sulla falsariga del "perché diavolo no". Uno ben sviluppato di Shaun Inman è abbastanza buono:

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

In cima alla risposta di @ kp:

Ho a che fare con questo e nel mio caso, devo mostrare un elemento figlio e correggere l'altezza dell'oggetto padre di conseguenza (il ridimensionamento automatico non funziona in un'intestazione bootstrap per qualche motivo non ho tempo per il debug) .

Ma invece di usare JavaScript per modificare il genitore, penso che aggiungerò dinamicamente una classe CSS al genitore e mostrerò selettivamente i figli di conseguenza. Ciò manterrà le decisioni nella logica e non basate su uno stato CSS.

tl; dr; applicare gli stili ae bal genitore <div>, non al figlio (ovviamente, non tutti saranno in grado di farlo. Cioè componenti angolari che prendono le proprie decisioni).

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

Nel mio caso, ho dovuto modificare il riempimento di cella di un elemento che conteneva una casella di controllo di input per una tabella che viene dinamicamente renderizzata con DataTables:

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

Dopo aver implementato il seguente codice di riga all'interno della funzione initComplete sono stato in grado di produrre il corretto riempimento, che ha impedito che le righe venissero visualizzate con un'altezza anormalmente grande

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

Ora puoi vedere che gli stili corretti vengono applicati all'elemento genitore:

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

In sostanza, questa risposta è un'estensione della risposta di @ KP, ma maggiore è la collaborazione per implementarla, meglio è. Riassumendo, spero che questo aiuti qualcun altro perché funziona! Infine, grazie mille @KP per avermi guidato nella giusta direzione!