[csswg-drafts] [css-nesting] referencing an ancestor selector (#3747)

Dan503 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] referencing an ancestor selector ==
CSS nesting spec
https://drafts.csswg.org/css-nesting-1/

In SCSS you can do this to reference an ancestor selector:

```scss
.foo {
  $ancestor: &;
  &__bar {
    &:hover {
      #{$ancestor}__baz {
        // .foo__bar:hover .foo__baz { ... }
      }
    }
  }
}
```

The main use case for wanting to do this is when a parent has a hover/focus state that affects the styling of a nested child element.

This is a common desire for BEM users.

Just an idea, maybe do something like this in real CSS?

```scss
.foo {
  @nest reference: customName;
  &__bar {
    &:hover {
      & (customName)__baz {
        // .foo__bar:hover .foo__baz { ... }
      }
    }
  }
}
```

The idea being that `@nest reference: customName;` registers `customName` as the reference to that ancestor selector.

You can then use `(customName)` inside brackets to reference the registered ancestor selector. Brackets may or may not be the best way to identify it as the referenced ancestor selector.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3747 using your GitHub account

Received on Tuesday, 19 March 2019 22:28:14 UTC