0

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

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.

  • Thanks! That was it. The second set of rules is coming from Gutenberg itself. The editor sets some default rules for all core blocks. – leemon Feb 20 at 8:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.