Parent css selector with Sass / Less preprocessor

You surely know it's impossible to "go up" de DOM tree with a CSS selector. It has to be a descending approach, from a parent element to its children. Nothing new here. But guess what, you can achieve the opposite with Sass or Less!

Let's take a concrete situation, you have a element wich can receive multiple classes, each ono of them handles particular parts of the styling.

.elem {
    /* classes to be placed on .elem */
    &.class1 { }
    &.class2 { }

    /* styles for some children */
    p    { }
    .etc { }

    /* apply styles if elem has .elem-wraper as parent */
    .elem-wraper & { }
}

Here you can see 3 kind of selectors.

The two first lines with the & immediately followed by something will compile exactly like this : .elem.class1 { }

The second block of selectors are meant to target .elem descendants. So the p will be compiled like this : .elem p { )

And finally, you can reference .elem's parent by putting the & at the end of your selector, and it will compile like this : .elem-wraper .elem { }

As @wjonthomas mentioned in the comments, be aware this technique does not allow you to change parent's styles but instead provide you with a new context for .elem, so you can apply new styles to .elem if it has .elem-wraper as parent.

This is just magic :P