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

Answer 1

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

try it it's work.

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

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 4

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