Impose ! inline CSS attribute

Asked

Viewed 264 times

1

I have a big problem to solve here and even though I think there is no solution I want help, I will not be seeing the problem as a whole...

I have the following code on a page:

.elemento {
  width: 400px;
  padding: 20px
}
<div class="elemento">
  <p>Tudo aqui dentro de .elemento, incluindo este parágrafo é importante ser exibido, exceto o link abaixo:</p>
  <a href="#" target="_blank" style="animation: none!important;background: rgba(255,255,255,.5);url('...')no-repeat 8px center !important;border: none!important;border-radius: 6px!important;bottom: auto!important;box-sizing: border-box!important;color: rgba(0,0,0,.5)!important;display: inline-block!important;float: none!important;font-family: Roboto,Arial,Sans-serif!important;font-size: 12px!important;font-weight: 700!important;height: 28px!important;left: 50%!important;line-height: 16px!important;margin: 8px auto!important;opacity: 1!important;padding: 6px 6px 6px 32px!important;position: relative!important;right: auto!important;text-align: left!important;text-decoration: none!important;text-indent: 0!important;top: auto!important;transform: translateX(-50%)!important;visibility: visible!important;max-width: 240px!important;z-index: 99999!important;zoom: 1!important;background-color: rgba(238,238,238,0.9)!important;">Problema</a>
</div>

I need to hide the tag <a></a> using only CSS, the problem is that the entire inline CSS of this link is with !important and I cannot hide/remove its parent element, as the siblings need to be exhibited. The pseudo-elements ::before and ::after are not defined.

Is there any way to hide without using JS?

html css attributes
  • 1

    Dude I don’t get it right, you want to give a display:One no <a> inside the div.elemento? It’s not clear what you want

  • With JS just delete the style and put what you want. Example: document.querySelector('.elemento > a').style = "display: none !important;"

  • Without JS you will see that the style with !important takes precedence over CSS... So the answer is that there is no way to do this without gambiarra. Not to mention that by style of the element, it is clear that whoever created the element did not want it to be erased.

  • @hugocsl that’s right, I want to make the element invisible.

  • @fernandosavio so. Really this is the intention of those who created the element... Wanted to find a means/gambiarra to be able to hide. It can even be with gambiarra, no problem. The problem is in using JS.

  • So the secret is to list all the CSS properties the element uses and figure out a way to hide the element using any property that is not in style.

  • @fernandosavio I took a look and it looks q, unfortunately it was used all possible properties

  • Yeah, it’s bad news... now you can only hope someone finds a loophole in it.

  • It’s really hard, I only see one way to solve this.... to solve a gambiarra normally you need another gambiarra :/

  • 1

    @fernandosavio Two solutions =) the guy who did forgot the filter: opacity() haha

Show 5 more comments

1 answer

2


Maybe this helps you, I removed all mouse events from the element with the CSS described below, and covered up the <a> with a pseudo-element ::after above it in the same colour as the background.

The hint, and you put in HTML tabindex="-1", to the <a> be inaccessible even via keyboard.

.elemento {
    width: 400px;
    padding: 20px
}

.elemento > a {
    /* remove os eventos de mouse */
    user-select: none;
    cursor: none;
    pointer-events: none;
}

.elemento > a::after {
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
<div class="elemento">
    <p>Tudo aqui dentro de .elemento, incluindo este parágrafo é importante ser exibido, exceto o link abaixo:</p>
    <a tabindex="-1" href="#" target="_blank" style="animation: none!important;background: rgba(255,255,255,.5);url('...')no-repeat 8px center !important;border: none!important;border-radius: 6px!important;bottom: auto!important;box-sizing: border-box!important;color: rgba(0,0,0,.5)!important;display: inline-block!important;float: none!important;font-family: Roboto,Arial,Sans-serif!important;font-size: 12px!important;font-weight: 700!important;height: 28px!important;left: 50%!important;line-height: 16px!important;margin: 8px auto!important;opacity: 1!important;padding: 6px 6px 6px 32px!important;position: relative!important;right: auto!important;text-align: left!important;text-decoration: none!important;text-indent: 0!important;top: auto!important;transform: translateX(-50%)!important;visibility: visible!important;max-width: 240px!important;z-index: 99999!important;zoom: 1!important;background-color: rgba(238,238,238,0.9)!important;">Problema</a>
</div>

EDIT: Option number 2 (this is even better than the first rss)

Since the element has no filter, you can use filter: opacity(0); and then use the classes to remove the mouse events and the tabindex html. So you don’t need pseudo-element

.elemento {
    width: 400px;
    padding: 20px
}

.elemento > a {
    filter: opacity(0);

    /* remove os eventos de mouse */
    user-select: none;
    cursor: none;
    pointer-events: none;
}
<div class="elemento">
    <p>Tudo aqui dentro de .elemento, incluindo este parágrafo é importante ser exibido, exceto o link abaixo:</p>
    <a tabindex="-1" href="#" target="_blank" style="animation: none!important;background: rgba(255,255,255,.5);url('...')no-repeat 8px center !important;border: none!important;border-radius: 6px!important;bottom: auto!important;box-sizing: border-box!important;color: rgba(0,0,0,.5)!important;display: inline-block!important;float: none!important;font-family: Roboto,Arial,Sans-serif!important;font-size: 12px!important;font-weight: 700!important;height: 28px!important;left: 50%!important;line-height: 16px!important;margin: 8px auto!important;opacity: 1!important;padding: 6px 6px 6px 32px!important;position: relative!important;right: auto!important;text-align: left!important;text-decoration: none!important;text-indent: 0!important;top: auto!important;transform: translateX(-50%)!important;visibility: visible!important;max-width: 240px!important;z-index: 99999!important;zoom: 1!important;background-color: rgba(238,238,238,0.9)!important;">Problema</a>
</div>

  • 1

    Wow, good!! I wasn’t remembering the opacity in filter. I had tested using pseudo-element, but it hadn’t gotten that good. With the filter got the way I needed hehe. Brigadão Hugo! ;)

  • 2

    Deserve applause... It’s a worthy gambiarra! hahahaha Won my +1

  • @fernandosavio the advantage of CSS is that there is always a way to do some gambiarra... The downside is that some people think that the gambiarra is the right way :/, tmj

  • @Leonardodias cool that solved there, do not forget the index tab and enjoy and put tb the attribute hidden to tb not appear for screen readers!

  • 1

    Unfortunately in this case only have to solve with gambiarra msm, as you said, with CSS always has a way right! On the index tab I can’t put, since I don’t have direct access to the tag structure, otherwise I could just remove the !important of style. The same goes for hidden :/

Browser other questions tagged html css attributes

You are not signed in. Login or sign up in order to post.