1

I am using HTML to input a cloud-based instagram feed on a website. I want to hide the bottom half of the feed that references the website of the publisher. The inline HTML that is outputting already has display: inline-block !important marked, so trying to hide it with display: none !important or visibility: hidden !important do not work. I am able to hide the entire block with CSS but not "parts" of it. I don't seem to be able to edit the HTML since it is coming from the cloud. The only HTML that I actually use on the site in order to make it render does not include any of the inline CSS, as it is only two lines.

Would someone mind explaining how this kind of thing works and why I am encountering issues overriding the inline CSS?

I have tried using:

display: inline !important, display: none !important and visibility: hidden !important

None of these are receiving priority, as the element.style in the chrome developer console clearly shows the inline CSS already marked as !important that I do not have access to, nor can I edit.

I simply want to hide one selector within the HTML. It is marked as "a"

a {
}

I have tried using this selector within the actual element, but it does not receive priority either. Nothing is working.

Chris Barr
  • 29,851
  • 23
  • 95
  • 135
Alan
  • 11
  • 2
  • 3
    Possible duplicate of [Can I override inline !important?](https://stackoverflow.com/questions/11150684/can-i-override-inline-important) – weegee Apr 19 '19 at 19:44
  • try to remove the inline css with jquery or javascript – Kiran Dash Apr 19 '19 at 19:44
  • Please check my answer below. Hope it helps – Kiran Dash Apr 19 '19 at 19:50
  • > I don't seem to be able to edit the HTML since it is coming from the cloud. I think I can help with a more-specific answer. Can you please post an example of the rendered HTML as well as the lines you add to get it from the cloud? – theUtherSide Apr 19 '19 at 19:53

2 Answers2

1

Try to remove the inline style with jQuery

$("#myDiv2").css("transform","");//used rotate to see the effect
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="myDiv1" style="width:100px !important; height:100px !important;transform:rotate(30deg) !important">
//Some Content
</div>
<div id="myDiv2" style="width:100px !important; height:100px !important; transform:rotate(30deg) !important">
//Some Content
</div>

Setting the value of a style property to an empty string removes that property from an element.

$("#myDiv2").css("transform","");
Kiran Dash
  • 4,816
  • 12
  • 53
  • 84
  • 1
    Thanks for your reply. Unfortunately, I'm not very confident in my ability to do this nor do I know exactly where to put it on a wordpress site. I'm just going to buy a plugin to take care of the issue instead of the cloud-based version, but thanks so much for your help. – Alan Apr 22 '19 at 17:09
-1

Typically the only way to do this is to be more specific in your selector, for example selecting a[href][style] is more specific than just a. But since this is inline styles and already using !important you unfortunately might be out of luck!

a[href][style]{
  color: green !important;
}
<a href="#" style="color: red !important;">This link uses !important</a>
<br/>
<a href="#" style="color: red;">This link does not</a>

If you wanted to just remove the links without importing several thousand lines of jQuery code, you can select and remove all <a> tags with just a few lines of plain JS.

document.querySelectorAll('a').forEach(link => {
  link.remove();
});
<p> here is some text
  <a href="#" style="color: red !important;">This link uses !important</a>
  <br/>
  <a href="#" style="color: red;">This link does not</a>
 and some more text
</p>
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
  • Thanks Chris. Unfortunately, that line of code removed the entire element for some reason. I believe I'm just going to buy a different plugin, but thanks for your response. – Alan Apr 22 '19 at 17:15
  • Well yeah, `element.remove()` will remove the element. That's what I said it would do. It sounded like you wanted to hide these elements, and there's no CSS selector you can use to override what is already there. The only thing left is to brute-force it with JS. You could change that code to force-hide the elements with `display:none` instead of removing them though. – Chris Barr Apr 22 '19 at 17:22