Menu
Does anyone know if there is some kind of tool to see/pick the best CSS selector based on CSS specificity to target a particular div?
I know what has higher specificity, but sometimes when working on other people projects where they have deeply nested selectors in there CSS,it is hard to find a way to override there stuff.
I know in Google chromes dev tool/firebug it shows a lot of information at the bottom when viewing the page source, is that something that should be used for this or is there other methods?
258
Memorize how to calculate specificity! Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element. Note: Inline style gets a specificity value of 1000, and is always given the highest priority!
“Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.” That means that CSS specificity is a set of rules used by browsers in determining which of the developer-defined styles will be applied to a specific element.
Rule 3: Inline CSS has the highest specificity. Inline CSS is the closest to the HTML element, so it is more specific and is therefore applied.
Since it's very widely used, no one's suggested it and fabianhjr suggested I do so, I'm going to recommend Firebug for Firefox. It's similar to Chrome's inspector, and allows you to see the CSS given to an element, as well as any overridden properties:
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
