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

Question

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ément enfant direct) ?

Je pense que la meilleure façon de l'expliquer est d'utiliser un exemple.

Note : J'essaie de donne un style à 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 réaliser cela en utilisant javascript, mais je me demandais juste si cela était possible en utilisant certaines fonctionnalités CSS inconnues (pour moi).

Answer 1

Pour autant que je sache, 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 d'un script 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 pouvez envisager d'examiner jQuery . Ses sélecteurs fonctionnent très bien avec les types "containing". Vous pouvez sélectionner le div, en fonction du contenu de ses enfants, puis appliquer une classe css au parent, le tout en une seule ligne.

Si vous utilisez jQuery, quelque chose du genre de ceci 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 la classe css :

.redBorder
{
    border: 1px solid red;
}

Voici la documentation pour Sélecteur "has" de jQuery .

Answer 2

En gros, non. Les éléments suivants serait être ce que vous recherchiez en théorie

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

Malheureusement, il n'existe pas.

Il y a quelques articles du type "pourquoi pas", dont un bien étoffé de Shaun Inman.

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