Greater Specificity Clarification

Hello all,

I have a question regarding specificity. Say, for instance, we have the following:

p.first-paragraph  {
  color: red;
}

first-paragraph p {
   color: red;
}

As I understand it, the code:

p.first-paragraph {
  color: red;
}

is more specific than that of:

first-paragraph p {
  color: red;
}

because the first section of code is targeting all the paragraph elements with class of first-paragraph as opposed to the second piece of code that is generically targeting all paragraph elements contained within the scope of the element named first-paragraph.

Is my understanding of this correct?

Richard.

1 Like

no, its not.

lets do a simple example:

<body>
  <div class="first-paragraph">
    <p class="first-paragraph">test</p>
  </div>
  </div>
</body>
p.first-paragraph  {
  color: red;
}

.first-paragraph p {
   color: blue;
}

according to you, p.first-paragraph has a higher specificity. Which means, the paragraph should be red. Its not, its blue as you can see

css uses a point system to resolve conflicting css properties. Both these selectors have the same specificity (11 points)

the point system works the following way:
1 point for element selectors (like p)
10 points for clases (like .first-pagraph)
100 points for ids
and a 1000 points when using style attribute.

1 Like

Hello @stetim94,

Thank you for your response.

In your example, I can see why the paragraph would be blue, because, if two elements share the same number of points, the latter style will be used due to the cascading nature of css. Am I correct?

Richard.

yes, you are right. But that contradict with your earlier statement:

Thank you for clearing this up @stetim94. It has been a very long day.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.