Emric Månsson Emric Månsson - 2 months ago 10
CSS Question

CSS property overriden. Why?

Why is the

h2
selector honored here? I'm pretty sure it shouldn't be.



h1,
h2,
h3 {
color: #204466;
}
figure.portfolio-item > figcaption {
color: #ffffff !important;
}

<figure class="portfolio-item">
<figcaption>
<h2>The title</h2>
<p>
The content.
</p>
</figcaption>
</figure>




Answer

If you want to override h2 style for instance, you should be giving it like this:

figure.portfolio-item > figcaption h2 {
  color: #333 !important;
}

The style will inherit but h2 has more precedence over that.

h1,
h2,
h3 {
  color: #204466;
}
figure.portfolio-item > figcaption h2 {
  color: #333 !important;
}
<figure class="portfolio-item">
  <figcaption>
    <h2>The title</h2>
    <p>
      The content.
    </p>
  </figcaption>
</figure>

Comments