Skip to content

[css-selectors] Support universal selector usage with tagname *tagname #8392

@brandonmcconnell

Description

@brandonmcconnell

Currently, all/most selectors support use after the universal selector.

For example…

w/ universal selector w/o universal selector identical targeting
*.class .class
*#id #id
*[attribute] [attribute]
*:pseudo :pseudo
*::pseudo ::pseudo
*elem elem

Some advantages to allowing the universal selector to prepend tagname selectors are:

  • better consistency in how all selectors behave with the universal selector

  • easier nesting syntax agreed upon nesting syntax

    Up until now, the generally accepted and voted upon nesting syntax requires wrapping a selector with something like :is() or :where() when it begins with an alpha character since that could easily be confused with a CSS property name. That can look something like this:

    a:hover {
      color: hotpink;
      :is(aside) & {
        color: red;
      }
    }

    With this change to how the universal selector works next to tagnames, this same block could now be rewritten much more concisely using * like this:

    a:hover {
      color: hotpink;
      *aside & {
        color: red;
      }
    }

I put together a pen for this which can be used for demonstrating this proposal and also to test if/when this is implemented:
https://codepen.io/brandonmcconnell/pen/eYjYVrE

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions