What is specificity?
The 'specificity' npm package is used to calculate the specificity of CSS selectors. Specificity is a measure of how specific a CSS selector is, which determines which styles are applied when multiple selectors match the same element.
What are specificity's main functionalities?
Calculate Specificity
This feature allows you to calculate the specificity of a given CSS selector. The result will be an array of objects, each containing the selector and its specificity score.
const specificity = require('specificity');
const result = specificity.calculate('body div #content .article');
console.log(result);
Compare Specificity
This feature allows you to compare the specificity of two CSS selectors. The comparison result will indicate which selector is more specific.
const specificity = require('specificity');
const result1 = specificity.calculate('body div #content .article');
const result2 = specificity.calculate('body div .article');
const comparison = specificity.compare(result1[0].specificityArray, result2[0].specificityArray);
console.log(comparison);
Other packages similar to specificity
css-specificity
The 'css-specificity' package also calculates the specificity of CSS selectors. It provides similar functionality to 'specificity' but with a different API. It is useful for developers who need to analyze and compare CSS selector specificity.
css-selector-parser
The 'css-selector-parser' package parses CSS selectors and can be used to analyze their structure. While it does not directly calculate specificity, it can be used in conjunction with other tools to achieve similar results.
Specificity Calculator
A JavaScript module for calculating the specificity of CSS selectors. The module is used on the Specificity Calculator website.
Specificity Calculator is built for CSS Selectors Level 3. Specificity Calculator isn’t a CSS validator. If you enter invalid selectors it will return incorrect results. For example, the negation pseudo-class may only take a simple selector as an argument. Using a psuedo-element or combinator as an argument for :not()
is invalid CSS3 so Specificity Calculator will return incorrect results. Specificity Calculator doesn’t support CSS character escape sequences.
Front-end usage
SPECIFICITY.calculate('ul#nav li.active a');
Node.js usage
var specificity = require('specificity');
specificity.calculate('ul#nav li.active a');
Passing in multiple selectors
You can use comma separation to pass in multiple selectors:
SPECIFICITY.calculate('ul#nav li.active a, body.ie7 .col_3 h2 ~ h2');
Return values
The specificity.calculate
function returns an array containing a result object for each selector input. Each result object has the following properties:
selector
: the inputspecificity
: the result e.g. 0,1,0,0
parts
: array with details about each part of the selector that counts towards the specificity
Example
var specificity = require('../'),
result = specificity.calculate('ul#nav li.active a');
console.log(result);
Testing
To test this package, install dependencies: npm install
Run: npm test