Group Descendants

[joe-bell]

Just ran into a little use-case where I wanted to apply a style only if the element was a descendant of a group

Use Case

• I have a component that uses the (fictional) class of group/stack
• In another component, I wanted to set specific animation styles if — and only if — it was a descendant of group/stack

Currently I'm working around this by checking if a data-stack attribute exists, but this leads to a fairly verbose class of:
group-data-[stack]/stack

Proposed Implementation

• group-* — is a direct child of group
• group-*/name — is a direct child of group/name
• group-** — is a descendant of group
• group-**/name — is a descendant of group/name

.group-\* {
  &:is(:where(.group > *)) {
    /* … */
  }
}

.group-\*\/name {
  &:is(:where(.group\/name > *)) {
    /* … */
  }
}

.group-\*\* {
  &:is(:where(.group *)) {
    /* … */
  }
}

.group-\*\*\/name {
  &:is(:where(.group\/name *)) {
    /* … */
  }
}