How to Find Out Where a CSS Rule Is Coming From

Is there a way to find out where a css rule is coming from?

You may use web inspector in Chrome.

Right click on failing element and select inspect element.

You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.

Next you need to expand "Computed Style" tab and look for offending style.

When found, you'll see small triangle to the left of style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see url to css for each of this. Bingo.

Find out where the CSS codes are used in the web page after Pick out them via Chrome DevTools?

Hei, instead of going to the source options, go in the Elements tab and look over the rule you are searching for, press on it and on the right you can see which file applies that style, and at which row. Like the screenshot below (just an example)

EDIT

2 CSS files use the same class name for the same CSS rule, how to find such a case?

Well, there are cases where multiple CSS files could apply style at the same class element. This divides into 2 categories:

1. The one that applies different styles to the same class
2. The one that applies the same styles to the same class

In the first case, there are no issues, and both styles will be applied. And to track those styling rules, you'd need to check both files.

In the second case, the style will be applied by the last rule, so the last read by the system (example below)

Also, on the second posted screenshot, you can see that the element that has "no applied style" simply does not exist, and is not a real element but a string

You can see in this screenshot that the image element is written between double quotes and does not represent a real HTML element. so no styling will be applied

Is there a way to check which CSS styles are being used or not used on a web page?

Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.

How to determine where particular style comes from using Chrome DevTools

Look at the Computed Style section on the top right.

It will show you every CSS property applied to the element, with an arrow that shows how each one was applied.

Discovering which CSS rule is responsible for the format of any element

It's right here in firebug:

The built-in tools basically offer the same feature now:

Find out what CSS styles are being used on a given page

I think this website does what you want: CSS Trashman. It takes a little while to run, but it works. It reduced my personal site's CSS from 3.31 KB to 402 Bytes.

If you would rather use a command-line tool, CSS Rationator powers CSS Trashman.

Find out why a CSS rule is disabled

They are not disabled. These entries have a strike through them to signify they have been reset or overwritten by a newer rule (one loaded after this style sheet for instance).

CSS styles are loaded in order of inclusion on the html page, with inline styles taking priority over CSS sheet definitions.

Firebug will show you which one has overwritten this one if you just review all CSS acting on that element. Just look for any other list-style-image: listed.

How do you determine what is overriding your style?

In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.

Consider the following HTML:

<style>
  #foo { color: red; }
  p    { color: blue; }
</style>

<p id="foo">What color am I?</p>

You would see the following:

---

Related Topics