CSS/Wordpress: Can't apply an underline to a link which id contains a given string

user_8925703 0
Viewed 214

I have multiple landing page that contain the same element that I want to apply an underline to. I'm using Wordpress custom JS/CSS plugin to add the CSS for each page but I want to make easier by only matching a part of the ID name instead of doing it for each page individually.

This is the code for each LP:

#hi-call-button1-2{
    text-decoration: underline;
}

And this the code I'm trying to make to work to no avail:

div[id*="hi-call-button1"] {
    text-decoration: underline;
}

Here is what the code of an element looks like:

<div id="hi-call-button1-3" class="brz-css-uiyth brz-wrapper">
    <div class="brz-d-xs-flex brz-css-qllru">
        <div class="brz-rich-text brz-css-tuigc" data-custom-id="vgqcolqiepoliqsomiyljswpbpwviqeqybcq">
            <p class="brz-fs-sm-17 brz-lh-lg-1_9 brz-lh-sm-im-1_6 brz-lh-xs-im-1_6 brz-ls-lg-0 brz-ls-sm-im-0 brz-ls-xs-im-0 brz-ff-overpass brz-ft-google brz-fw-lg-400 brz-fw-sm-im-400 brz-fw-xs-im-400 brz-text-lg-justify brz-text-xs-center brz-text-sm-right brz-fs-lg-24 brz-fs-xs-im-23"><a href="tel:+18333580460" style="color: rgb(0, 0, 0);" class="link--external" data-brz-link-type="external">+1 (800) 123-4567</a></p>
        </div>
    </div>
</div>

The problem is that it works in JsFiddle here but not in my pages. I tried adding !important with no success. I don't know how to troubleshoot the problem. Any help would be appreciated.

EDIT: Here is a test page that replicate the problem https://1on1finance.com/test/

wordpress css
5 Answers

The reason it's not working is that is this CSS http://prntscr.com/uiwac5

html body  div[id^="hi-call-button1"] a.link--external {
    text-decoration: underline !important;
}

Use the above CSS this will override the CSS in your website.

Please clear your autoptimize cache to reflect the CSS changes.

user_73137190

I see you already have you may try to add this to: appearance/customize

a[href]{
    text-decoration: underline !important;
}

if it doesn't work, try adding this :

.brz .brz-rich-text .link--anchor, .brz .brz-rich-text .link--external, .brz .brz-rich-text .link--popup {
    text-decoration: underline !important;
}

PS: it is not a good practice to use the (!important flag)... as it will bother any other developer who may work on the same project in the future... So if the above code worked fine, try removing the (!important flag) and test if it works... if it doesn't, then you have no other option...

user_120265450

try this css

div[id^="hi-call-button1"] .link--external {
    text-decoration: underline ;
}
user_49829590

You will need to overwrite the rules already being applied. Remember if you are using Autoptimize to 'Aggregate CSS files' and/or 'Also aggregate inline CSS?' it might be effecting the load order of rules so you can turn these options off and reload your cache to check.

.brz div[id^="hi-call-button1"] .brz-rich-text .link--external {
    text-decoration: underline;
}

By using the two-character operator “^=” we can target the div element that starts with val "hi-call-button1"

user_19899290

Im not sure if this is resolved or not. I managed to get it working on your test page like this

div[id^="hi-call-button1"] a {
    text-decoration: underline !important;
}
user_100143250
Related