How to get All Defined CSS Selectors for a given DOM Element?

Question

How to get all DEFINED CSS Selectors for a given DOM Element using jQuery?

With defined I mean all CSS Selectors which are used in any of the Stylesheets applied to the document.

In a way, this is similar to the feature implemented by FireBug where in it shows all the Applied CSS Selectors for a selected DOM Element.

Any help is appreciated.

This sounds more reasonable... don't know if it's possible using JS/jQuery alone though. — BoltClock, Feb 27 '11 at 20:20
What about [your other question](http://stackoverflow.com/questions/5135287)? Is it still relevant? — Gumbo, Feb 27 '11 at 20:25
It sounds like you're trying to find the element's computed styles, not it's "defined selectors." — Matt Ball, Feb 27 '11 at 22:15
@Matt Ball: I am not exactly interested in the computed styles. I am interested in getting the selectors. — GeekTantra, Feb 28 '11 at 04:52

score 9 · Accepted Answer · edited May 23 '17 at 11:53

From this answer you might be able to get what you are looking for by looping through the cssRules property.

var myElement = $("#content");
for (var x = 0; x < document.styleSheets.length; x++) {
    var rules = document.styleSheets[x].cssRules;
    for (var i = 0; i < rules.length; i++) {
        if (myElement.is(rules[i].selectorText)) {
            $("ul").append("<li>" + rules[i].selectorText + "</li>");
        }
    }
}

Given the following dom:

<div>
    <div id="content">
    </div>
</div>

And css rules:

div
{
    background-color:black;
}
#content{
    height:50px;
    width:50px;
}
div > div
{
    border: solid 1px red;
}

We would get a matched rule set of:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,fieldset, input, textarea, p,
blockquote, th, td div
#content 
div > div

Example on jsfiddle. Not sure how well this will work for all scenarios but might be something to look at if it will fit your needs.

Updated with a slightly more complete example...

$(document).click(function(event) {
    var rules = GetAppliedCssRules($(event.target));
    var $ul = $("#rules").empty();
    $.each(rules, function() {
        $ul.append("<li>" + this + "</li>");
    });
    event.preventDefault();
});

function GetAppliedCssRules($element) {
    var appliedRules = [];
    for (var x = 0; x < document.styleSheets.length; x++) {
        var rules = document.styleSheets[x].cssRules;
        for (var i = 0; i < rules.length; i++) {
            if ($element.is(rules[i].selectorText)) {
                appliedRules.push(rules[i].selectorText);
            }
        }
    }
    return appliedRules;
}

Does this return the appliedRules in the order of priority as applied in the DOM like FireBug does? — GeekTantra, Feb 28 '11 at 12:07
This will not give you the priority in which the rules were applied just that a given rule in the stylesheet matches your element. If you want to find out the final style for an element you can use `getComputedStyle` — Mark Coleman, Feb 28 '11 at 12:49
@Mark, do you know how to order the selectors by css priority? I see firebug lite order by css priority but I do not know how they did it. — Codler, Feb 11 '13 at 21:40
+1 for easy, instantly usable implementation. (solution-idea was clear here) — L. Monty, Jun 18 '14 at 21:27
I'm getting `Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules`. How to skip external CSS? — brauliobo, Nov 07 '22 at 12:26

score 0 · Answer 2 · answered Feb 27 '11 at 21:15

I think the two features are not similar.

Furthermore, I think nor jQuery nor the browser keep trace of selectors used through javascript code or stylesheet file; selectors are used to reference one or more DOM elements, to eventually apply styles to them.

So, what it is kept are the styles, not the used selectors.

Hope this helps.

How to get All Defined CSS Selectors for a given DOM Element?

2 Answers2

Linked