How to find the css file name associated with an element?

Question

I am not sure that it's possible, but I want to know after clicked an element ( div or...) the css file name associated of this element.

example

<link href="style_1.css" rel="stylesheet" type="text/css" />
<link href="style_2.css" rel="stylesheet" type="text/css" />

<div class='my_class'></div>

When I click on this div I need to know from what css file name the style of div.my_class is associated style_1.css or style_2.css

It is not possible. If you tell me problem definition so I can help you — Amy, Oct 15 '14 at 05:44
It is possible that both css files can associate with single element. — Arun Ghosh, Oct 15 '14 at 05:45

score 2 · Accepted Answer · edited May 23 '17 at 12:20

//Need exact selector like if class is sampleclass then className='.sampleClass'   
var classFinder = function (className) {

        $.each(document.styleSheets, function (index, cssFile) {

            if (cssFile.href) var path = cssFile.href.toString();

            var classes = cssFile.rules || cssFile.cssRules;
            for (var x = 0; x < classes.length; x++) {
                if (classes[x].selectorText == className) {

                    //Find css file name from the file path
                    alert(path);
                }
            }
        });
    }

You have to find the file name from the path text. It will work for only the style sheets loaded from same domain. i.e wont work if you are loading style sheets from cross domain.

-- Originally adaptation of an answer here & Find the updated fiddle here.

score 0 · Answer 2 · answered Oct 15 '14 at 05:50

If I were you, I'd use Chrome's developer tools:

1.) Open page you want to edit in Chrome
2.) Right click and click "inspect element"
3.) Look to the right inside the developer tools and you can see the css file associated.

In this example you can see that the style for your name "Milo" is located in the "all.css" file

enter image description here

score 0 · Answer 3 · answered Oct 15 '14 at 05:53

I think it is possible by using javascript, the idea is next (just prototype):

Check all links on page and try to get css files via ajax

var styles = $("link[rel='stylesheet'");
var from   = [];
styles.each(function(){
  var curr = $(this);
  $.get(curr.attr("href"), function(res){
    // some operations
    var text = res;
    if(text.indexOf(".someClass") > -1)
      from.push(curr.attr("href"));
  });
});
console.log(from);

I think it is possible, but some limits: for example allow origin.

Addition: Also you must understand that css styles can be in the same page with element. So you must check styles tags on page.

score 0 · Answer 4 · answered Oct 15 '14 at 05:54

1) You can use a web browser, right click on element, and select 'Inspect element' (don't try IE). It lists styles and where they come from. 2) I haven't worked with Brackets editor, but I know there is option 'Quick Edit' that shows associated styles to given element. Not sure if it shows source file.

score 0 · Answer 5 · answered Oct 15 '14 at 05:56

Actually, if you are just interested in knowing the css style of any div, you can do it pretty easily. In Firefox, right click on the element and select "inspect element". You will see the css in the inspector and it will tell you on what line and in what css file it is located in. Likewise in Chrome or Safari, inspect element does the same thing. I'm not a Windows user but I would guess F12 in IE shows you as well. If you want it to show in some alert or popup when you click, etc. , that would be a different story. Your question is not specific how you want to get the css.

How to find the css file name associated with an element?

5 Answers5