Is there an JS library that orders CSS selector texts according to specificity?

Question

Possible Duplicate:
Sorting a set of CSS selectors on the basis of specificity

I need a JS library that order CSS selector texts from most specific selector text to the less specific selector text, where specificity is specified according to W3C

If there aren't any libraries out there, could I write it pretty simply using JS or jQuery?

CSS selector text could be div#body .text.

Answer 1

In the comments on your question, josh3736 links the W3C specification for determining specificity. If you felt inclined to write such a library yourself (which I'd encourage, if for no other reason than learning more about it), their method seems like a good reference.

A selector's specificity is calculated as follows:

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Answer 2

I figured I'd give this a stab. Feel free to use, modify (or fix) this code as you see fit. I can't promise it's correct, but the examples they give on the w3c spec all produce the same results.

function specificity(selector, isStyleAttribute) {

    selector = selector || "";
    function numMatches(regex) {
        return (selector.match(regex)||[]).length;
    }

    var numClasses = numMatches(/\.[\w-_]+\b/g);
    var numIds = numMatches(/#[\w-_]+\b/g);
    var numNamesInBraces = 0;
    var namesInBraces = selector.match(/\[[^\]]*\b[\w-_]+\b[^\]]*\]/g) || [];
    for (var idx = 0; idx < namesInBraces.length; ++idx) {
        numNamesInBraces += (namesInBraces[idx].match(/\b[\w-_]+\b/g)||[]).length;
    }

    var results = [0,0,0,0];
    results[0] = isStyleAttribute ? 1 : 0;
    results[1] = numIds;
    results[2] = numMatches(/\[[^\]]+\]/g) + numClasses;
    results[3] = numMatches(/\b[\w-_]+\b/g) - numIds - numClasses - numNamesInBraces;
    return results.join(',');

}

If you want to sort an array with it, it can be used like this:

selectors.sort(function(a,b) { return specificity(a) > specificity(b); });