block editor - Override theme style rule in Gutenberg

I have a theme that adds the following CSS rule inline through the Customizer to style the hover state of links in post content:

.entry-content a:hover {
    color: <color selected in the Customizer>;
}

I'm adding support for Gutenberg in my theme and I'm having some issues with the link button block. The previous rule is overriding the following default core block style rule that applies the same link button color selected in Gutenberg for the button active, focus and hover states:

.wp-block-button__link:active,
.wp-block-button__link:focus,
.wp-block-button__link:hover {
    color: inherit;
}

Checking the Inspector, I see that the last rule applied is the first one instead of the second one, which I thought it was more specific. That means that the link button color selected in Gutenberg is not honored.

Any ideas on how to fix this?

Thanks in advance

I have a theme that adds the following CSS rule inline through the Customizer to style the hover state of links in post content:

.entry-content a:hover {
    color: <color selected in the Customizer>;
}

I'm adding support for Gutenberg in my theme and I'm having some issues with the link button block. The previous rule is overriding the following default core block style rule that applies the same link button color selected in Gutenberg for the button active, focus and hover states:

.wp-block-button__link:active,
.wp-block-button__link:focus,
.wp-block-button__link:hover {
    color: inherit;
}

Checking the Inspector, I see that the last rule applied is the first one instead of the second one, which I thought it was more specific. That means that the link button color selected in Gutenberg is not honored.

Any ideas on how to fix this?

Thanks in advance

• theme-customizer
• block-editor
• css

Share Improve this question asked Feb 20, 2019 at 7:21 leemonleemon 2,02844 gold badges2525 silver badges5151 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

.entry-content a:hover is more specific than .wp-block-button__link:hover.

According to the rules of specificity, the first selector contains 2 class selectors (.entry-content and :hover), and 1 type selector (a), for a specificity score of 0,0,2,1.

The second selector, on the other hand, contains 2 class selectors (.wp-block-button__link and :hover), and no type selectors, for a score of 0,0,2,0.

It wasn't clear to me from your question where exactly the second set of selectors was coming from, but assuming that you can't edit them, the solution would be to exclude Gutenberg buttons from your original selector. You can do this with the :not pseudo class:

.entry-content a:not(.wp-block-button__link):hover {
    color: <color selected in the Customizer>;
}

Now your Customizer-selected colour will only apply to links that are not block editor/Gutenberg buttons.