Appliquer des styles CSS à un élément en fonction de ses éléments enfants

Est-il possible de définir un style CSS pour un élément, qui n'est appliqué que si l'élément correspondant contient un élément spécifique (comme l'élément enfant direct)?

Je pense que cela s'explique mieux à l'aide d'un exemple.

Remarque : J'essaie de styliser l'élément parent , en fonction des éléments enfants qu'il contient.

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

Note 2 : Je sais que je peux y arriver en utilisant javascript, mais je me demandais simplement si cela était possible en utilisant des fonctionnalités CSS inconnues (pour moi).

À ma connaissance, le style d'un élément parent basé sur l'élément enfant n'est pas une fonctionnalité disponible de CSS. Vous aurez probablement besoin de scripts pour cela.

Ce serait merveilleux si vous pouviez faire quelque chose comme div[div.a]ou div:containing[div.a]comme vous l'avez dit, mais ce n'est pas possible.

Vous voudrez peut-être envisager de regarder jQuery . Ses sélecteurs fonctionnent très bien avec les types «contenant». Vous pouvez sélectionner le div, en fonction de son contenu enfant, puis appliquer une classe CSS au parent sur une seule ligne.

Si vous utilisez jQuery, quelque chose du genre pourrait fonctionner (non testé mais la théorie est là):

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

ou

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

combiné avec une classe CSS:

.redBorder
{
    border: 1px solid red;
}

Voici la documentation du sélecteur jQuery "has" .

En gros, non. Ce qui suit serait être ce que vous étiez après en théorie:

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

Malheureusement ça n'existe pas.

Il y a quelques articles sur le thème "pourquoi diable pas". Un bien étoffé par Shaun Inman est assez bon:

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

En plus de la réponse de @ kp:

Je m'occupe de cela et dans mon cas, je dois montrer un élément enfant et corriger la hauteur de l'objet parent en conséquence (le dimensionnement automatique ne fonctionne pas dans un en-tête de démarrage pour une raison quelconque, je n'ai pas le temps de déboguer) .

Mais au lieu d'utiliser javascript pour modifier le parent, je pense que je vais ajouter dynamiquement une classe CSS au parent et CSS-sélectivement montrer les enfants en conséquence. Cela maintiendra les décisions dans la logique et non sur la base d'un état CSS.

tl; dr; appliquer les styles aet bau parent <div>, pas à l'enfant (bien sûr, tout le monde ne pourra pas le faire. Par exemple, les composants angulaires prennent leurs propres décisions).

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

Dans mon cas, j'ai dû changer le remplissage des cellules d'un élément qui contenait une case à cocher d'entrée pour un tableau qui est rendu dynamiquement avec DataTables:

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

Après avoir implémenté le code de ligne suivant dans la fonction initComplete , j'ai pu produire le rembourrage correct, ce qui a empêché l' affichage des lignes avec une hauteur anormalement grande

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

Maintenant, vous pouvez voir que les styles corrects sont appliqués à l'élément parent:

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

Essentiellement, cette réponse est une extension de la réponse de @ KP, mais plus il y a de collaboration pour l'implémenter, mieux c'est. En résumé, j'espère que cela aide quelqu'un d'autre car cela fonctionne! Enfin, merci beaucoup @KP de m'avoir conduit dans la bonne direction!