Tool to See CSS Specificity

See exact CSS specificity in Chrome Dev Tools?

Chrome dev tools sorts classes by their specificity from top-to-bottom.

Check this out:

Inspect an element (in this case an svg) and type in the css attribute you want to see the specificity for (this case "height').

Highest is always on top!

Tool to see CSS specificity

Use Chrome Inspector.

DevFest 2010 - Chrome Developer Tools - In Depth

Google Chrome Developer Tools: 12 Tricks to Develop Quicker

Google's Page on Dev Tools

How to view browser's calculated CSS specificity?

Before Firefox switched to WebExtensions, there was a getSpecificity() function available in the inIDOMUtils API in Firefox.

To use this API you had to write your own Firefox extension, though.

The Firefox DevTools obviously already use an internal API for that but the info doesn't seem to be displayed anywhere yet. Therefore there is a feature request to show it somewhere.

Unfortunately, there is also no WebExtension API that exposes this info to extensions.

CSS specificity testing

The method I settled with is to use getComputedStyle to get the style with "highest priority". In the css I add a "tag" to the content property. In jasmine I then check if the desired tag is the computedStyle. (I will extend this in scss so that the content property is set by a mixin if test mode is used and not set in production.) This only makes a unit test for the class of highest priority, but not for the second highest etc.

Below is a tests to illustrate the example (only the first and last should pass).

// specs codedescribe("CSS", function() {  it("Div element of class test should be handled by .test", () => {    const testdiv = document.getElementById("testdiv")    m = window.getComputedStyle(testdiv).getPropertyValue("content");        expect(m).toEqual('".test"');  });
 it("Div element of class test should be handled by div", () => {    const testdiv = document.getElementById("testdiv")    m = window.getComputedStyle(testdiv).getPropertyValue("content");        expect(m).toEqual('"div"');  });
 it("Div element should be handled by .test", () => {    const testdiv = document.getElementById("testdiv2")    m = window.getComputedStyle(testdiv).getPropertyValue("content");        expect(m).toEqual('".test"');  });
 it("Div element of class test should be handled by div", () => {    const testdiv = document.getElementById("testdiv2")    m = window.getComputedStyle(testdiv).getPropertyValue("content");        expect(m).toEqual('"div"');  });
});

// load jasmine htmlReporter(function() {  var env = jasmine.getEnv();  env.addReporter(new jasmine.HtmlReporter());  env.execute();}());

.test {    content: '.test';}
div {  content: 'div';}

<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script><script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script><link href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" rel="stylesheet"/><div class="test" id="testdiv">TestDiv</div><div id="testdiv2">TestDiv</div>

---

Related Topics