W3C home > Mailing lists > Public > public-css-archive@w3.org > March 2019

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

From: Daniel Tonon via GitHub <sysbot+gh@w3.org>
Date: Tue, 19 Mar 2019 22:28:12 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-422982523-1553034491-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:58 UTC