This content originally appeared on Bram.us and was authored by Bramus!
As mentioned in Three important things you should know about CSS :is(), the specificity of :where() will always be 0:
:where()works the same way like:is()does, but will always have a specificity of0. You can cleverly wrap this around other selectors to undo their specificity. Think of:where(:not(…))for example.
Over at CSS-Tricks, Mojtaba Seyedi details how we can also use this to do more clever CSS Resets
With the power of this selector, libraries can give us style with no specificity. So there would be no specificity to compete with when we as authors write CSS.
Like so:
:where(ul[class]) {
list-style: none;
}
.list {
list-style: square;
}The contents inside :where() is specific enough to remove list-style only when a class is being used on an ul, while the use of :where() does not hinder any further overriding by the CSS developer.
Using the Specificity of :where() as a CSS Reset →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-07-20T21:53:32+00:00) Using the Specificity of :where() as a CSS Reset. Retrieved from https://www.scien.cx/2021/07/20/using-the-specificity-of-where-as-a-css-reset-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.