HTML sibling selector not working when class is behind the target

Question

html:

<div class="wraper">
  <div class="box">  
    <span class="text">Test2</span>
    <span class="loser text">Test1</span>
  </div>
  <div class="box">
    <span class="text">Test1</span>
    <span class="text">Test2</span>
  </div>
  <div class="box">
    <span class="loser">Test1</span>
    <span class="text">Test2</span>
  </div>
</div>

css:

.wraper .loser ~ .text {
  color: pink;
}

The sibling selector only gets applied when the class targeted is in front of the div. Shouldn't it be applied regardless of the span ordering?

What I am trying to achieve is to always color the spans in the box that contains a loser class.

Codepen if you want to play around: http://codepen.io/shooshte/pen/grxJpZ

`a ~ b` selector means that it will target all `b` elements that appears **after** `a` elements and are siblings, so your codepen is working perfectly — Marcos Pérez Gude, Jul 08 '16 at 08:38
This works as it's expected, but you didn't specify what are you trying to achieve? — Esko, Jul 08 '16 at 08:39

score 0 · Accepted Answer · answered Jul 08 '16 at 08:41

0

No, the ordering is not irrelevant. See here for the docs in MDN

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

answered Jul 08 '16 at 08:41

DAXaholic

33,312
6
76
74

is there an alternative for what I want to do with CSS? – Miha Šušteršič Jul 08 '16 at 08:43
You didn't tell us yet what you want to achieve :) – DAXaholic Jul 08 '16 at 08:44
Sorry, edited out the main question – Miha Šušteršič Jul 08 '16 at 08:51

score 0 · Answer 2 · answered Jul 08 '16 at 08:42

0

The sibling selector only gets applied when the class targeted is in front of the div. Shouldn't it be applied regardless of the span ordering?

No, from the spec:

and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one

CSS is designed so that after the parser has added an element to the DOM it knows all the rules that will be applied to that element. This prevents having to wait for the entire document to be parsed before it can tell which rules apply to an element.

answered Jul 08 '16 at 08:42

Quentin

914,110
126
1,211
1,335

is there an alternative for what I want to do with CSS? – Miha Šušteršič Jul 08 '16 at 08:43
No. Change the HTML. Add a class on a parent element. – Quentin Jul 08 '16 at 08:46

HTML sibling selector not working when class is behind the target

2 Answers2