Skip to main content

+add-element-specificity

Sometimes you need to increase selector specificity. This mixin adds element specificity of current selector by a given number.

+add-element-specificity($n)

$n: positive number - a number of steps the current selector element specificity will be increased.

+mode('draft')

+component('#footer')
+default
color: black

+state(':hover')
+add-element-specificity(2)
color: white


#footer {
color: black;
}


#footer:hover:not(_):not(_) {
color: black;
}

add-element-specificity($sel, $n)

Function with same name as mixin above, which adds element specificity of given selector by a given number.

$sel: single, simple or combinator selector - a selector that will be increased its specificity.

$n: positive number - a number of steps the current selector element specificity will be increased.


Specificity is local for element

In SPOT CSS system is problem of selector specificity reduced only for single element, so it must be resolved only for a few element selectors, see Local specificity.

Specificity for whole component

If you want increase selector specificity for whole component, see How to increase component selector specificity.


See also

+add-class-specificity
+add-id-specificity
+add-specificity
+override