How to use specificity - 10 common examples

analyzer.on('selector', function(rule, selector, expressions) {
		var selectorSpecificity = specificity.calculate(selector),
			parts;

		if (!selectorSpecificity) {
			debug('not counted for %s!', selector);
			return;
		}

		// parse the results
		parts = selectorSpecificity[0].specificity.
		split(',').
		slice(1).
		map(function(i) {
			return parseInt(i, 10);
		});

		debug('%s: %s', selector, parts.join(''));

(function visit(node) {
    // Check for selector. We might be in an at-rule like @font-face
    if (node.type === 'decl' && node.parent.selector) {
      const isCustomProperty = /^--/.test(node.prop);
      const propName = isCustomProperty ? node.prop : node.prop.toLowerCase(); // Custom properties ARE case sensitive
      if (isCustomProperty || properties.includes(propName)) {
        // Split up combined selectors as they might have different specificity
        specificity
          .calculate(node.parent.selector)
          .forEach(specificityObject => {
            const isStyleAttribute =
              specificityObject.selector === 'bogusselector';
            (rulesByProperty[propName] = rulesByProperty[propName] || []).push({
              predicates: getCurrentPredicates(),
              selector: isStyleAttribute
                ? undefined
                : specificityObject.selector.trim(),
              specificityArray: isStyleAttribute
                ? [1, 0, 0, 0]
                : specificityObject.specificityArray,
              prop: propName,
              value: node.value,
              important: !!node.important
            });

parseSelector(resolvedSelector, result, rule, (selectorTree) => {
							// Check if the selector specificity exceeds the allowed maximum
							if (
								specificity.compare(maxChildSpecificity(selectorTree), maxSpecificityArray) === 1
							) {
								report({
									ruleName,
									result,
									node: rule,
									message: messages.expected(resolvedSelector, max),
									word: selector,
								});
							}
						});
					} catch (e) {

var selectorItemsSorted = stable(selectorItemsPseudoClasses, function (itemA, itemB) {
    return specificity.compare(itemA.selectorStr, itemB.selectorStr);
  }).reverse(); // last declaration applies last (final)

node.reduce((max, child) => {
				const childSpecificity = nodeSpecificity(child); // eslint-disable-line no-use-before-define

				return specificity.compare(childSpecificity, max) === 1 ? childSpecificity : max;
			}, zeroSpecificity());

var specSum = function(selector){
  var specs = specificity.calculate(selector)[0].specificity.split(',');
  var sum = (parseInt(specs[0])*1000) + (parseInt(specs[1])*100) + (parseInt(specs[2])*10) + (parseInt(specs[3]));
  return sum;
};

function getRange(node) {
    if (isScope(node)) {
        return node.nodes
            .map(getRange)
            .reduce(reduceRanges);
    } else if (node.type === 'rule') {
        return specificity.calculate(node.selector)
            .map(result => {
                return result.specificity.split(',').map(v => Number(v));
            })
            .reduce(reduceRange, Object.assign({}, DEFAULT_RANGE));
    }
    return null;
}

Object.keys(styleObj).sort((a, b) => {
    const aArray = a.split('~');
    const bArray = b.split('~');
    return specificity.compare(aArray[0], bArray[0]) ||
      parseFloat(aArray[1]) - parseFloat(bArray[1]) ||
      parseFloat(aArray[2]) - parseFloat(bArray[2]) ||
      aArray.length - bArray.length ||
      parseFloat(aArray[3]) - parseFloat(bArray[3]);
  }).forEach(key => {
    style += styleObj[key];

constructor(key: string, scope: RuleScope, root: postcss.Root, selectorContext: ParsedSelector | undefined) {
    this.key = key;
    this.scopes = [scope];
    this.root = root;
    this.selectorContext = selectorContext;
    this.declarationMap = new Dictionary>();
    this.authoredProps = new Set();
    this.declarationInfos = new Set();
    let specificitySelector = selectorContext &&
      selectorContext.toContext(selectorParser.className({ value: "foo" }));
    this.specificity = specificitySelector &&
      specificity.calculate(specificitySelector.toString())[0];
  }

.unique.map(({value, count}) => {
      const [a, b, c, d] = calculate(value).shift().specificityArray

      return {
        count,
        value,
        specificity: {a, b, c, d}
      }
    })
    .sort((a, b) => compare(b.value, a.value))