Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Developer Tools: How to find out what is overriding a CSS rule?

People also ask

What is CSS rules overriding?

CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. Overriding: Overriding in CSS means that you are providing any style property to an element for which you have already provided a style.

How do you inspect rules in CSS?

# View an element's CSSRight-click the Inspect Me! text below and select Inspect. The Elements panel of DevTools opens. The Inspect Me!


Use the Computed Style panel of the element inspector. Expand the property of interest to see the list of applicable rules, and which one won.

Chrome screenshot


You can simply look at the ones with the same name which aren't striked out, remember the listing is by importance.

Or you can view the computed styles. They will be the actually applied styles.


crtrl + shift + c and inspect the element. Then find the style without a line through it, in the box in the down right corner.

the override is in most cases at the top (and without a line through it, as this style is the "winning" one).