✨CSS Gets Class Prefix Selector in Level 5
New CSS selector targets classes with prefixes
TL;DR
The new CSS feature allows for more precise class targeting using hyphen-separated prefixes. However, it's still in early stages and lacks browser support.
CSS Selectors Level 5 now includes a new feature called the Class Prefix Selector, denoted by `.prefix-*`. This selector targets classes that start with a specific prefix followed by a hyphen. For instance, `foo-bar` would match but not just `foo`. The syntax is strict and only supports hyphens for prefixes, no underscores or wildcards in between. Despite its promise, the feature has zero browser support currently and will likely take years before it's ready for production use.
Key Points
Class Prefix Selector syntax: .prefix-*, where prefix is hyphen-separated
Selector matches only classes starting with the specified prefix and a hyphen
Supports only hyphens for prefixes, underscores or wildcards not allowed
Browser compatibility non-existent; feature detection via @supports rule
Feature in early stages, likely years before production-ready status
Why It Matters
If you're working on large-scale CSS projects with modular components, the Class Prefix Selector could streamline your styling process. However, its current lack of browser support means it's not yet practical for most teams.
Frequently Asked Questions
Why does this matter?
If you're working on large-scale CSS projects with modular components, the Class Prefix Selector could streamline your styling process. However, its current lack of browser support means it's not yet practical for most teams.
What happened?
The new CSS feature allows for more precise class targeting using hyphen-separated prefixes. However, it's still in early stages and lacks browser support.
Comments
Be the first to comment
Enjoyed this article?
Get it daily. 7am. Free. Reads in 5 minutes.
Join 3,226 builders reading daily.