Site logo

Archived topic

Typography plugin settings does not honor css specificity.

1 reply · Started by Olle on July 8, 2019

Viewing posts 1–2 of 2

Hi
If I use the customizer to add some styles to headings. h2 for example.
Then it's totally impossible to edit that h2 with a higher specificity. line-height is what is the problem.
So I had to drag all the settings to 0 to be able to edit my other styles.

So I do some styles for h2 in the customizer like font-size 36px, line-height 1.2em.
Then I want to have another style for a specific div. So I set up a CSS rule like div h2.special-div and edit the styles to for example font-size 24px, line-height 0.9em.
It does not have any effect at all.

So what is the trouble here?

Regards
Olle

Hi there,

what does the HTML you're using look like? For example if you're targeting a H2 in a div then something like this:

<div class="special-div">
    <h2>My heading in a special div</h2>
</div>

and the CSS would look like this:

.special-div > h2 {
    /* My styles here */
}

or alternatively this:

<h2 class="special-heading">My special heading</h2>

and CSS:

h2.special-heading {
    /* My styles here */
}
This archived topic is closed to new replies.