To understand how specificity functions, refer to the official documentation available here. Essentially, in a high number base, specificity can be calculated as follows:
(100 * ID rules) + (10 * class rules) + (1 * tag rules)
.
If you encounter a challenging website or need to apply a broad rule, consider using
:not(#some_id_which_you_will_never_find)
to artificially boost specificity. Remember that ID rules carry the most weight and should be utilized.
For instance, I aimed to prevent any div element on a site from being hidden with visibility: hidden
, so I implemented the following code:
div:not(#oStHDi_0):not(#oStHDi_1):not(#oStHDi_2):not(#oStHDi_3):not(#oStHDi_4):not(#oStHDi_5) {
visibility: inherit !important;
}
This code snippet boasts a specificity value of 601.
In comparison, the specificity for body
is 001, html > body
equates to 002, and body:not(#foobar)
holds a specificity of 101.