Support » Plugin: Broken Link Checker » Links with CSS class .broken_link (strikethrough style) do not show as such

  • Resolved abitofmind

    (@abitofmind)


    PROBLEM: I look at a page with a link, which I know is broken, and which I know Broken Link Checker has flagged as a broken-link and yet not repaired. Nevertheless it does not show in the “broken link style” that I have defined in the preferences.

    WordPress > Settings > Broken Link Checker > General
    Link tweaks: [√] Apply custom formatting to broken links
    .broken_link, a.broken_link { text-decoration: line-through; }

    REASON: In CSS more specific selectors (i.e. Astra Themes “.ast-single-post .entry-content a”) take precedence over less specific selectors like the ones Broken Link Checker creates for broken links i.e. “.broken_link, a.broken_link”.

    SOLUTION: You give the “Broken Link Checkers” CSS attribute an !important suffix. It works. Your broken link gets rendered as strikethrough text.

    NOTE: In CSS !important shall usually be only the last resort, as it usually is equivalent to “I do not know how the cascade works in this case (or in general) so I just shout over it”. I concluded that the broken link class can hardly be more specific/deep (unless artificially maybe?) hence we need to resort to !important.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter abitofmind

    (@abitofmind)

    Solved it myself, shared the answer above. Maybe helpful to somebody one day. 😉

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @abitofmind !

    You’re absolutely right in this case and your explanation is correct with one exception of the !important attribute.

    Of course, we can sometimes avoid using it by providing more specific CSS selectors (the more specific ones, for example including more items in the selector path, will take precedence).

    There are however some cases where we have no other choice but to use !important – for example, the theme sets up some style with !important already and there’s (barely) any other way to override those.

    Also, I would agree that in cases where people have control over the general CSS, it’s not a good sign if they use !important for the reason you’ve mentioned. But in an open environment like WordPress, there’s a lot of situations where something overrides something else, adds weird CSS etc. and we have to go with that and use !important.

    Kind regards,
    Pawel

    Thread Starter abitofmind

    (@abitofmind)

    I think that you as the plugin developer already ship the best possible default selector, namely “a.broken_link, .broken_link”.

    The plugin’s CSS-selector for broken links needs to select all broken links regardless in what parent elements they may reside, hence it has to be very general and can’t be too specific. So it is very likely that themes apply the attribute text-decoration with a more specific selector and hence take precedence. So the site administrator needs to take care of this, and see that the theme (or other plugins) contain no text-decoration attributes with more specific selectors or an !important flag. That’s seems to be the only possible way as also you outline it.

    The only alternative idea I had was to maybe “artificially blow-up selector specificity” but I do not know any way to achieve that. Wrapping the A element into something else would be bad because it changes HTML markup and may break plugins or themes. And maybe still be for nothing because some selectors may still be more specific. And wrapping an A into 5 SPAN elements just to win the specificity game, even more terrible. And whether there are tricks with CSS selectors being artificially more specific than they need to be, I do not know any way to achieve this, but maybe there is? Do you know any?

    • This reply was modified 1 month ago by abitofmind.
    • This reply was modified 1 month ago by abitofmind.
Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.