Why the selector does not work:

.parent > .child + .parent > .child { ... }

Snippet:

 .parent > .child + .parent > .child { color: green; } 
 <div class="parent"> <p class="child">текст</p> <p class="child">текст (почему не зелёный?)</p> </div>

To make it work, you can replace it with .parent > .child + .child , but the question is precisely why the original version does not work.

  • 2
    In the css there are no groups like, is it? - andreymal
  • No, I wanted to show how this selector is expected to be interpreted - user268670
  • @ user268670 Yes, in general, it should just be consistent. From left to right. - smellyshovel

1 answer 1

There are no groupings in CSS, selectors are simply interpreted sequentially from left to right. A .parent > .child in your selector means “the next item after the .parent > .child ”

 .parent > .child + .parent > .child { color: green; } 
 <div class="parent"> <div class="child">Это .parent &gt; .child</div> <div class="parent">Это .parent &gt; .child + .parent <div class="child">Это .parent &gt; .child + .parent &gt; .child (зелёный!)</div> </div> </div>