0

I am on the initial phases of Learning CSS

i had some doubts regarding css specificity. My html code has a span tag wrapped inside a div class extra. Both of these have been defined a different color in css . For some reason , the span tag takes effect and not the class extra

While learning about Specificity, i had read that a class ( extra here ) has a higher Specificity than element ( span here )

i even tried to calculate their Specificity on https://specificity.keegan.st , where class .extra had a Specificity of 10 being a class while span had a Specificity of 1 being a element

then is this not being followed in the actual output , i guess i am missing something .

Hope someone can clear this small doubt

<div class="extra">
  <span>here is a span element</span>
</div>

span {
  color: blue;
}

.extra {
  color: green;
}
Badal Singh
  • 479
  • 8
  • 24
  • 2
    `.extra` is not applied to span so talking about specificity is irrelevant – Temani Afif Sep 22 '19 at 10:33
  • @TemaniAfif but span is wrapped inside class .extra so shouldn't it inherit its properties ? – Badal Singh Sep 22 '19 at 10:35
  • inheritance and specificity are two different concept and you answered your self: *it inherit its property* so you confirm that the properties aren't *directly* applied to the element – Temani Afif Sep 22 '19 at 10:37
  • body { color: black; } .extra { color: green; } Can you tell me why does the span tag inherits color from extra class in this case which it wasn't doing Earlier – Badal Singh Sep 22 '19 at 10:56
  • Shouldn't it be colored black as . extra is not applied to span like you told – Badal Singh Sep 22 '19 at 10:57
  • Inheritance only happens if either there is no rule containing the property which has the element as the subject of its selector, and the property is defined as inherited, or there is one or more such rules and in the rule from that set with the greatest cascade weight, the property is set to the value `inherit` – Alohci Sep 22 '19 at 10:58
  • I advise you to read the duplicates I added for more information. I cannot and will not detail how inheritance/specificity works in the comment section. Simply take the time to read about it and you will get it. If you still have doubt you can post another question – Temani Afif Sep 22 '19 at 10:58

0 Answers0