How to change style inline tag <a>

[Eros eros]

hi guys, I have a tag <a> included in a third-party DIV with the inline style (example style="animation:none!important;background-color:rgba(238,238,238,0.9,........) how can I change it after loading the page? 

I would like to apply display: none or visibility: hidden

Is it possible with CSS?

Edited April 25, 2024 by Eros eros (see edit history)

[Andrei H]

Hello,

Yes, as long as the <a> element is not loaded within an iframe, you should be able to hide it using CSS.

With CSS, you do not need to target that element after the page loads. If the CSS specific code is added, the element will be hidden, even if it's added at a later time.

You might need to use the '!important' property though.

Example:

.div-class a {
    display: none !important;
}

 

Edited April 25, 2024 by Andrei H (see edit history)

[Eros eros]

I've already tried with the display: none !important but it doesn't work, the inline style rules remain valid.

I also tried with the pseudo :after and :before, it doesn't even work

I have to hide it

Edited April 25, 2024 by Eros eros (see edit history)

[Andrei H]

Hello,

Once you added your styles in the CSS stylesheet, have you also checked the styles that the element has? You can achieve that by right clicking on the element then selecting 'Inspect'

At this point, there are 2 possibilities:
1. Your style was added, but the element overridden it (if this is the case, you should see your style in the Styles tab, but that style being with a strikethrough).
2. Your selector did not match that element, thus the style was never added to the <a> element.

For the first case, the only explanation would be the fact that the element has display !important added to it too. If this is the case, it won't be possible to change that via CSS. At this point, your best shot is doing it via JavaScript - this might be helpful: https://stackoverflow.com/questions/462537/overriding-important-style

[Eros eros]

yes the element already has a display: block !importat, in fact my display: none !important is crossed out.

so I'm just left with JS

[Andrei H]

Hello,

Actually, one more thing you can try is the following:

If the element has no position and z-index, you can try to give it a position absolute and a negative z-index, this way having it under the other elements.

Otherwise, you will have to look into the JavaScript stuff.

[Eros eros]

ok thanks I will try and update you

[Eros eros]

 

it doesn't work simply because the script that loads the element whose css needs to be changed has the defer attribute.... how can I wait for the script to load completely and then change the inline style to its <a> tag?

[Andrei H]

Hello,

If you have access to the template where the script tag is loaded, you could try with the onload event - I am not sure if will work, but it's work a try.

Otherwise, one other option might be the setInterval function (https://developer.mozilla.org/en-US/docs/Web/API/setInterval). You call your function multiple times, until you find the a element, then hide it and clear the interval.

Edited April 28, 2024 by Andrei H (see edit history)

[rikazkhan7]

Yes, it's possible to change the style of an element after the page has loaded using CSS.