css and/or SASS + (sibling) selector upwards [dupl

Question

This question already has an answer here:

• Is there a “previous sibling” CSS selector? 13 answers

In CSS there is no way to select a sibling with plus if the sibling is above in the output, a preceding element in the html.

For example

<div class="first">
<div class="second">

.second + .first { style applied to div.first}

Is there anyway to do this in SASS/SCSS?

Answer 1

SASS support all CSS3 selectors. Sibling + is one of them. But it does not bring some extra features. It means you can do

first {
  + second { 
     font-size: smaller;
  }
}

But you can't impact a parent with it ...

Ps : it seems to be a features of CSS4 :)

Answer 2

I ended up using Jquery. gets the job done :) (sorry i dont have the example code anymore as i went another route, but its quite simple, something like 'if child has class then add class to this'. :)

Answer 3

I know the feeling, this is really annoying. I found a quick way of doing it tho.

HTML:

<div class="mainmenu">
  <div class="subnav">
    <ul>
      <li>Whatever</li>
    </ul>
  </div>
</div>

-------->

SCSS:

// CSS is pointed towards to first child of div "mainmenu" with the class "subnav".

 .mainmenu{
      & > .subnav{
        // Child Selector SCSS HERE
      }
    }

====> thgaskell, you have proved me wrong :) My code works fine and I lost 6KB of my Minified code! I have updated the code as how the comment below was informed.

Answer 4

div { & + & { margin-left: 15px; background: firebrick;}}

try it it's work.

Answer 5

May or may not be suitable for your needs but you can use the general sibling selector in Sass/CSS. This will select all elements on the same node level (not explicitly before but still handy):

.second {
   .first ~ & {
       /* styles to be applied to .second if a .first exists at the same node level */   
   }
}