Sun, 2015-10-25 00:37
Consider this code:
<style> #mainContent p { /*Specificity 101*/ color: red; } p { /*Specificity 1*/ color:blue; } .green { /*Specificity 10*/ color:green; } </style>
<body> <section id="mainContent"> <p>Paragraph inside section. This is a <strong class="green">short text</strong> nested</p> </section> </body> </html>
When this page renders in a browser, the text "short text" is rendered in green.
According to Selectors Specificity, "#mainContent p" has a specificity of 101 and ".green" a specificity of 10 which is lower, but still the lower selector wins, why?, shouldn't the selector with the greatest specificity win?
Thanks in advance,
Rafael
//mod edit: code tags, [code] and [/code], added. ~gt
Sun, 2015-10-25 05:55
#1
The higher specificity does
The higher specificity does win. There is no conflict because .green is attached to the strong element, not to p.
cheers,
gary