Using :not() & nonexistent ID to create specificity for targeted unique elements (Hackity hack)
While simplifying my CSS I began playing with specificity as it applies to unique elements/objects "trapped" within a library or framework.
I found using the ":not" selector on an element with a non-existent id (such as "ordinary" used in the codepen) allowed for very targeted css without using "id" .
This feels evil but thought it would be better to ask a community for a second opinion.
Is this technique to increase specificity for specific unique elements a devilishly good idea or just pure evil? š¤
https://codepen.io/Snap-Riley/pen/XWvmLab
6 Replies
I apologize in advance if this post is a little unclear. This is my first post in discord!:thanks:
Iād say itās better than an
!important but itās in the same vein of āprobably shouldnāt use if you can avoid itāRelevant article on using something similar to this technique to override unlayered styles https://blog.kizu.dev/extra-nesting-specificity/
Extra Nesting Specificity
Exactly aĀ month ago, IĀ started aĀ thread onĀ Mastodon about unlayered styles, which led toĀ meĀ bumping the corresponding CSSWG issue aĀ bit more than two weeksĀ ago. There was one CSS hack IĀ did share inĀ this thread which IĀ did not yet write about inĀ this blog, which Iām going toĀ doĀ now!
Thanks for the article. It's directly on point.
I agree, it's better to not do this at all. (Thus the title containing "hackity bad hack" š )
But how does one perform the CSS styling when you are backed into a corner due to vendor library CSS restrictions? Are there other techniques that would work?
What we need is the ability to assign stylesheets linked with the html
link tag to cascade layers. This has been proposed by Miriam Suzanne https://css.oddbird.net/layers/link-layer/ and after a couple of years of discussions is now at a design review stage https://github.com/w3ctag/design-reviews/issues/970. But until this has been approved and implemented in browsers I think the *:not(#a#b) {...} trick is as good as any in a pinch š¤·āāļøGitHub
Issues Ā· w3ctag/design-reviews
W3C specs and API reviews . Contribute to w3ctag/design-reviews development by creating an account on GitHub.
Now that is an interesting proposal. Thanks for the feedback.