Selector Specificity

Usage

Add Selector Specificity to your project:

npm install postcss @csstools/selector-specificity --save-dev

import parser from 'postcss-selector-parser';
import selectorSpecificity from '@csstools/selector-specificity';

const selectorAST = parser().astSync('#foo:has(> .foo)');
const specificity = selectorSpecificity(selectorAST);

console.log(specificity.a); // 1
console.log(specificity.b); // 1
console.log(specificity.c); // 0

selectorSpecificity takes a single selector, not a list of selectors (not : a, b, c). To compare or otherwise manipulate lists of selectors you need to call selectorSpecificity on each part.

Prior Art

• keeganstreet/specificity
• bramus/specificity

For CSSTools we always use postcss-selector-parser and want to calculate specificity from this AST.

Current Tags

• 2.2.0                                ...           latest (2 years ago)

3 Versions

• 2.2.0                                ...           2 years ago
• 2.0.2                                ...           3 years ago
• 1.0.0                                ...           3 years ago