I know that with code of the form .class1 + .class2 specified styles are applied to class2 , which immediately follows class1 . But how can I set styles specifically for class1, after which there is class2 ?

  • .class1:first-child or .class0 + .class1 - webDev_
  • @webDev_ 1) and how will the first-child help him? It will apply even if no one is near. 2) you can not change the order because then there will be no selection. From the site learn.javascript.ru: "div + p is the first right neighbor: p at the same nesting level that comes right after the div (if any)." - alexoander
  • There is no reverse selector in CSS, so in general, such a request can be solved only through javascript. - Sasha Omelchenko
  • @SashaOmelchenko probably you are right, because I also did not find anything sensible in the css docks. But the question is terribly interesting and mb someone will offer a non-standard solution) mb through the parent’s block, how can I distort it? - alexoander
  • In js, I’ll check, if .next ('') is equal to something, then prescribe such styles, and if not, then I’m worried about it, but Oleksandr

1 answer 1

Since there is no reverse selector, like .class1 - .class2 in CSS, some special case can be solved with the selector + or ~ , assigning display: flex parent and setting order descendants. The markup should be based on the assumption that the “previous” element should be located below. An alternative to the order property may be the flex-direction: row-reverse property.

 .container { display: flex; } .child { border: 1px solid; padding: 1em; } .class2 { order: 1 } .class3 { order: 2 } .next ~ .prev { background: #ccc; } 
 <div class=container> <div class="child class3">class3</div> <div class="child next class2">class2</div> <div class="child prev class1">class1</div> </div>