web-dev-qa-db-fra.com

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 ne s'applique que si l'élément correspondant contient un élément spécifique (en tant qu'élément enfant direct)?

Je pense que cela est mieux expliqué en utilisant un exemple.

Note: J'essaie de 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 y arriver en utilisant javascript, mais je me demandais simplement si cela était possible en utilisant des fonctionnalités CSS inconnues (pour moi).

htmlcss
175
M4N

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 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 pouvez envisager de regarder jQuery . Ses sélecteurs fonctionnent très bien avec les types 'contenant'. Vous pouvez sélectionner la div en fonction de son contenu enfant, puis appliquer une classe CSS au parent sur une seule ligne.

Si vous utilisez jQuery, cela 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 pour le jQuery "a" sélecteur .

116
KP.

En gros non. Ce qui suit serait ce que vous recherchiez en théorie:

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

Malheureusement, ça n'existe pas.

Il y a quelques articles sur le sujet "pourquoi diable pas". Une version bien élaborée de Shaun Inman est plutôt bonne:

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

57
Justin Wignall

En plus de la réponse de @ kp:

Je traite 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 bootstrap pour une raison quelconque, je ne l'utilise pas. t avoir le temps de déboguer).

Mais au lieu d’utiliser javascript pour modifier le parent, je pense que j’ajouterai dynamiquement une classe CSS au parent et que CSS affichera 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 a et b au parent <div>, pas à l'enfant (bien sûr, tout le monde ne pourra pas le faire. c'est-à-dire Angular composants prenant 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>
1
Mauricio Morales