CSS Specificity Question?

[Noel Forte]

Hi –

So I have two selectors in my WordPress theme’s CSS file. The first one looks like this:

.hentry .entry-title, .entry-title a {
    margin-bottom: 8px;
    line-height: 1;
        font-weight: 700;
        text-decoration: none;
    font-size: 22px;
}

Now, I have another selector that looks like this for all post titles within a feature section:

.feature-section .hentry .entry-title, .entry-title a {
    font-size: 30px;
}

For whatever reason, this seems to “cross-out” the previous selector in the web inspector, but still doesn’t override the font-size property.

NOTE: The second selector comes before the first selector in my CSS. Does that matter?

[Paulie_D]

NOTE: The second selector comes before the first selector in my CSS. Does that matter?

Yes.

[Senff]

If you look at the font size of .entry-title, it will be 30 px because .feature-section .hentry .entry-title has more weight than .hentry .entry-title (and so the order doesn’t matter).

However, if you look at the LINK in .entry-title; both carry the same weight so here it DOES matter which comes last. Since the one with 22px comes after the one with 30px, it’ll be 22px.

So all in all, the text in .entry-title is 30px, but the link inside it is 22px.

[Noel Forte]

@Senff –

Thanks! That solved it!

[Author]

Posts