+add-class-specificity

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

+add-class-specificity($n)

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

SASS

+mode('draft')

+component('#footer')
  +default
    color: black
    
  +state(':hover')
    +add-class-specificity(2)
        color: white

SCSS

@include mode('draft');

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

  @include state(':hover') {
    @include add-class-specificity(2) {
        color: white;
    }
  }
}

SASS

+mode('strict')

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

  +default
    color: black
    
  +state(':hover')
    +add-class-specificity(2)
        color: white

SCSS

@include mode('strict');

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

  @include default {
    color: black;
  }

  @include state(':hover') {
    @include add-class-specificity(2) {
        color: white;
    }
  }
}

#footer {
    color: black;
}


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

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

Function with same name as mixin above, which adds class 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 class 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-element-specificity
+add-id-specificity
+add-specificity
+override