CODEWITHSUNDEEP
cssnestedsiblings
user2526037
user2526037

Reputation: 57

Why CSS nesting sibling combinator doesn't apply correctly in following example?

<div class='splash yellow'>
  <span>Yellow</span>
</div>
<div class='splash green'>
  <span>Green</span>
</div>
<div class='splash red'>
  <span>Red</span>
</div>

.splash {
    margin: 15px;
  
    + .red {
        background-color: red;
    }
    + .green {
        background-color: green;
    }
    + .yellow {
        background-color: yellow;
    }
}

https://jsfiddle.net/8e27qyc9/2/

How come the yellow background isn't applied like red and green in the fiddle example? What could be causing this behavior?

Upvotes: 0

Views: 36

Answers (1)

user2526037
user2526037

Reputation: 57

I confused sibling selector with compound selector.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#concatenation_is_not_possible

Solution:

.splash {
    margin: 15px;
  
    .red& {
        background-color: red;
    }
    .green& {
        background-color: green;
    }
    .yellow& {
        background-color: yellow;
    }

}

Upvotes: 0

Related Questions