Random Tip 31

Dreamweaver can give you information about the specificity of a CSS rule when you turn on rules view in the CSS panel, then if you hover over a selector you’ll get specificity information in a comma-delimited format like this 0,2,0,2.

To calculate specificity you count within each selector the number of inline styles, id’s, classes and element names – so in the pictured example the selector is #wrap #sidebar ul li which contains no inline styles (0,2,0,2) two id’s (0,2,0,2) no classes (0,2,0,2) and two element names (0,2,0,2).

Find out more about the cascade, inheritance and specificity with Zoe Gillenwater’s CSS Cheat Sheet, peruse the specification or book some training on my 2010 Web Masterclass or Dreamweaver ACA at Certitec in Cardiff.

Leave a Reply