My class selector is being overriden by the element selector-CodePudding

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?

CodePudding user response：

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