1 reply [Last post]
rafael.soteldo
rafael.soteldo's picture
Offline
newbie
Last seen: 4 years 21 weeks ago
Timezone: GMT-4.5
Joined: 2015-10-24
Posts: 8
Points: 27

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.