{"id":264665,"date":"2018-01-10T07:24:16","date_gmt":"2018-01-10T14:24:16","guid":{"rendered":"http:\/\/css-tricks.com\/?p=264665"},"modified":"2022-02-13T07:07:06","modified_gmt":"2022-02-13T15:07:06","slug":"latest-ways-deal-cascade-inheritance-specificity","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/latest-ways-deal-cascade-inheritance-specificity\/","title":{"rendered":"The latest ways to deal with the cascade, inheritance and specificity"},"content":{"rendered":"\n

The cascade is such an intrinsic part of CSS that they put it right there in the name. If you\u2019ve ever needed to use !important<\/code> to affect specificity in the cascade, you\u2019ll know that it can be a tricky thing<\/a> to deal with. In the early days of CSS, it was common to see highly specific selectors like this:<\/p>\n\n\n\n

#sidebar ul li {}<\/code><\/pre>\n\n\n\n
We\u2019re all much better at managing specificity nowadays. It\u2019s a widely accepted best practice to keep specificity low and flat\u2014to shun ID selectors, to make liberal use of classes, and to avoid unnecessary nesting. But there are still plenty of situations where a more specific selector will be useful. With the introduction of a newly proposed pseudo-class, more support of the shadow DOM, and the use of the all<\/code> property, we will soon be able to handle inheritance and specificity in new and exciting ways.<\/p>\n\n\n\n\n\n\n
The :is()<\/code> Pseudo-Class<\/h3>\n\n\n
Lea Verou recently proposed this new pseudo-class specifically designed to control specificity. It\u2019s already made its way to the CSS Level 4 Selectors spec<\/a>. Lea has a write up<\/a> of why it\u2019s useful and there\u2019s some coverage<\/a> of it in the CSS-Tricks almanac.<\/p>\n\n\n\n
Let\u2019s take :not<\/code> as an example. The specificity of :not<\/code> is equal to the specificity of its argument. This makes using :not<\/code> rather painful. Take the following as an example:<\/p>\n\n\n\n