+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.

SASS

+mode('draft')

+component('#footer')
  +default
    color: black
    
  +state(':hover')
    +add-specificity(1, 1, 0)
        color: white

SCSS

@include mode('draft');

@include component('#footer') {
  @include default {
    color: black;
  }

  @include state(':hover') {
    @include add-specificity(1, 1, 0) {
        color: white;
    }
  }
}

SASS

+mode('strict')

+component('#footer')
  +register
    +state(':hover')

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

SCSS

@include mode('strict');

@include component('#footer') {
  @include register {
    @include state(':hover');
  }  

  @include default {
    color: black;
  }

  @include state(':hover') {
    @include 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