Home > Software design >  CSS : modifying the style of a div if it his parent has a specific class
CSS : modifying the style of a div if it his parent has a specific class

Time:08-17

I've am stuck on this css issue. Here is a simplified code :

<div >
     <div >
          red
     </div>
</div>
<div >
     <div >
          blue
     </div>
<div>

I don't know how to code this (or if I can code this) but I need something like : "If class is "child" and parent's class is "type2", put the div in blue (without changing the red div)".

Knowing that in my specific situation, I can't change the html, so I can't add some ids.

Thank you in advance and have a great day ! :-)

CodePudding user response:

Chained CSS could do the trick:

.type2 .child {
  color: blue;
}

/* OR combined classes   child */
.parent.type2 .child {
  color: blue;
}

/* OR direct child of type2 */
.type2 > .child {
  color: blue;
}

CodePudding user response:

.type2 div{
color : blue;
}

.type2 .child{
 color : blue;
}
<div >
     <div >
          red
     </div>
</div>
<div >
     <div >
          blue
     </div>
<div>

  •  Tags:  
  • css
  • Related