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

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?

Solution 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 :)

Solution 2:

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.

Solution 3:

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 */   
   }
}