Comment puis-je appliquer un style uniquement à l'élément parent sans affecter les styles des éléments enfants ?

Question

Dans cet exemple, j'essaie de rendre l'élément parent plus transparent sans modifier l'opacité des éléments enfants.

<div>
<div className="larger-box">
  <div className = "smaller-box">
 </div>
</div>

Voici mon style CSS actuel :

.larger-box{
  width: 10rem;
  height: 10rem;
  background-color: red;
}
.smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1 !important;
}

Est-il possible d'obtenir cet effet en CSS ?

Answer 1

Vous pouvez utiliser CSSnot.

.larger-box:not(.smaller-box) {
  width: 10rem;
  height: 10rem;
  background-color: red;
}

.smaller-box {
  width: 2rem;
  height: 2rem;
  background-color: green;
}

Answer 2

Les enfants seront toujours affectés par l'opacité de leur parent, donc le moyen le plus simple de leur donner une opacité différente est d'en faire des éléments frères et de positionner le deuxième élément absolument au-dessus du premier, donnant ainsi à chaque élément sa propre opacité. Veuillez noter la position : relative du div d'emballage parent.

Ici, j'ai du texte affiché derrière un div rouge avec un div vert au-dessus, comme s'il s'agissait d'un élément enfant, mais en réalité c'est un élément frère et n'est donc pas affecté par l'opacité du div rouge. Ainsi, le texte apparaît à travers le div rouge, mais pas le div vert.

.wrapper{
  width: 10rem;
 height: 10rem;
 position: relative;
}

p { padding: 8px}

 .larger-box{
   position: absolute;
  top: 0;
  left:0;
  width: 10rem;
  height: 10rem;
  background-color: red;
  opacity: 0.3
}
 .smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapper">
   <p>Lorem ipsum dolor sit amet. Sit dicta tempore id quas delectus estitier at voluptatem voluptas sit culpa iste ea voluptatum vero!</p>
  <div class="larger-box"></div>
  <div class = "smaller-box"></div>
</div>