'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?

sass

Solution 1:^[1]

SASS supports all CSS3 selectors. Sibling + selector 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...

P.S. It seems to be a feature of CSS4.

Solution 2:^[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:^[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 */   
   }
}

Solution 4:^[4]

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'. :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Oleg Valter is with Ukraine
Solution 2
Solution 3
Solution 4	petergus

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

Solution 1:[1]

Solution 2:[2]