-2

I'm currently doing a project for my uni class and I'm having a problem with the following part of my html+css code:

h1, h2, h3 {
  color: #747d19;
}
.name_date {
  color: #861781;
}
<div class="name_date">
  <h3>Shean</h3>           
  <p><i><b>August 3rd, 2018</b></i></p>
</div>

The way I understand it, a class selector is more specific and thus overrides the element selector. But when viewing the result, the text "Shean" is formatted using the h3 color rule. What am I doing wrong?

deepakchethan
  • 5,240
  • 1
  • 23
  • 33
daniel
  • 118
  • 1
  • 7
  • 3
    You're not targeting the same element! – Alon Eitan Sep 27 '21 at 14:36
  • 2
    Specificity does not come into play here - that would only be relevant, if both rules were targeting the same element to begin with. The case here is simply that you have set one text color for the div element, which _normally_ the headline elements would simply inherit - but here they don't, because you explicitly specified a different text color for them. – CBroe Sep 27 '21 at 14:37

1 Answers1

0

That is true when the class selector is in h3 tag.

h3{
  color: red
}
.purpleHeader{
  color: purple
}

<h3 class="purpleHeader">La la la la...</h3>

To achive your goal you have write a more specific rule.

.purpleHeader h3 {
  color: red
}
.purpleHeader {
  color: purple
}

Now it is red

Kode Neko
  • 89
  • 2