Specificity in CSS is a test that defines how competing style sheet rules can be applied to the document elements. The larger the style sheets are, the more specificity rules can be applied. For example in case you have two style properties on the same element, the last one defined in the document will definitely be more specific and take greater effect.
Competing Cascading Style Sheet Rules
These refer to rules beyond why a browser would choose one style over another style when displaying an element? This would not generally happen in simple websites, but the more complicated the site will be, the more conflicts will be frothing the style properties.
When it comes to CSS Specificity, it is basically order, which matters. It is basically the order in which styles are read by the browser. If you have a case of two style properties affecting the exact same selector and the last property to be read is the one that would apply.
The same is true whether the styles are in same style sheet or in different external style sheets. The style that is read last would include the one that is applied. If you are getting styles from a variety of locations, the order of styles is important.
Following will be the web page fragment
<html> <head> <link href="stylesheet1.css" rel="stylesheet" type="text/css" /> <style type="text/css"> @import URL ("stylesheet3.css"); p { color: blue; } </style> <link href="stylesheet2.css" rel="stylesheet" type="text/css" /> </head> <body> <p style="color: yellow;">first paragraph</p> </body> </html>
The styles and style sheets are imported in the following order by the web browser:
stylesheet1.css stylesheet3.css p { color: blue;} stylesheet2.css <p style ="color:yellow;">
The fifth style is most specific and it would be applied even if there are other styles in the other style sheets that can also be applied.
Typical CSS Specificity examples
First, you need to count the element names. These names can either be in HTML elements or XML elements. To distinguish between the two, I will write it in caps:
* { ... } = 0 P { ... } = 1 DIV P { ... } = 2 H3 + P { ... } = 2
Count Classes, pseudo classes and non-ID attributes and multiply them by 10
.top { ... } = 10 P.top { ... } = 11 a:link { ... } = 11 a.new:link { ... } = 21 H3.bottom + p.top { ... } = 22 DIV + *[title] { ... } = 11
IDs are most specific, so count then and multiply them by 100
#a1 { ... } = 100 #a1.red { ... } = 110 H3#a1.red { ... } = 111 blockquote #a2 { ... } = 101
