Skip to main content

+add-specificity

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

+add-specificity($id-n, $cls-n, $el-n)

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

$cls-n: positive number - a number of steps the current selector specificity will be increased on class level.

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

+mode('draft')

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

+state(':hover')
+add-specificity(1, 1, 0)
color: white


#footer {
color: black;
}


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

add-specificity($sel, $id-n, $cls-n, $el-n)

Function with same name as mixin above, which adds specificity of all 3 levels of current selector by a given number.

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

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

$cls-n: positive number - a number of steps the current selector specificity will be increased on class level.

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


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-element-specificity
+add-class-specificity
+add-id-specificity
+override