1

Sorry if the title is complicated, but that pretty much describes it.

Lets say I have two CSS classes: .class1 and .class2. What .class2 does is irrelevant, however, if .class2 is wrapping a div that has .class1, I need it to be a different colour then if it was alone.

For example:

<div class='class1'>
  I should have a red background!
</div>

<div class='class1'>
   <div class='class2'>
     I should have a blue background!
   </div>
  I still should have a blue background!
</div>

Stylesheet:

.class1 {
  background-color: red;
}

.class2 {
  /*Contents are irrelevant*/
}
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
theJuls
  • 6,788
  • 14
  • 73
  • 160
  • Are you sure you don't mean: *What .class2 does is irrelevant, however, if .class1 is wrapping a div that has .class2, I need it to be a different colour then if it was alone.* – Michael Benjamin Oct 06 '17 at 20:39
  • 1
    This question is not a duplicate of the question linked to. The linked question deals with styling `.div-b` (the child) where `.div-b` is inside `.div-a`. *This* question is about styling `.div-a` (the parent), where `.div-b` is inside `.div-a`. – Rounin Oct 07 '17 at 20:18
  • It's a duplicate of https://stackoverflow.com/questions/1014861 obviously. – seven-phases-max Oct 15 '17 at 19:49

2 Answers2

1

.class1{background-color:red}
.class2{background-color:green}
.class1 .class2{background-color:blue}
<div class='class1'>
  I still should have a red background!
</div>
<div class='class2'>
     I should have a green background!
</div>
<div class='class1'>
   <div class='class2'>
     I should have a blue background!
   </div>
  I still should have a blue background!
</div>
Farhad Bagherlo
  • 6,725
  • 3
  • 25
  • 47
  • 1
    This answer has two upvotes and yet *I still should have a blue background* has... a red background. – Rounin Oct 07 '17 at 20:14
-1

Your css should work:

.class1 {
    background-color: red;
}
.class2 > .class1 {
    background-color: blue;
}

You may check it here

Possibly, there is some syntax errors in your css which causing the following style is ignored by browser, check again your css.

bagus
  • 1
  • 1