Question

I often have this problem and am not sure of the most elegant solution. I don’t want to use !important although that would work.

I have articles on my site which are contained in a div with the class article. The corresponding CSS controls the H4 tag like this.

.articles h4 {
font-size: 16px;
}

However within my articles I have a div element with the class notice which also has a number of H4 tags, but when I use this CSS below, the declaration from the articles class is applied instead.

.notice h4 {
font-size: 24px;
}

What I want is a solution that means I don’t have to apply classes to the actual H4 tags in notice — I want to be able to point to H4 tags by their container element.

Answer 1

Assuming your mark up is something like this:

<div class="articles">
    <h4> Article Title </h4>
    <div class="notice">
        <h4> Notice Title </h4>
    </div>
</div>

As long as

.notice h4 {
    font-size: 24px;
}

is below .articles in your css file it should work. However, another fix would be to use

.articles .notice h4 {
    font-size: 24px;
}