1

I have the below code which is in a document that I don't control. I only have the option to upload one custom CSS file for overrides. How can I accomplish this? It is to get rid of the vendor link on our site. I am good with CSS, but they have it set up tricky.

<div style="display:block !important;text-align: center !important; padding: 15px; visibility:visible !important; opacity:1 !important; 
    height:auto !important; width:auto !important; op:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
    <a href="http://vendorsite.com" target="_blank" style="display:inline !important; font-size: 11px !important; 
        visibility:visible !important; position:relative !important; opacity:1 !important; height:auto !important; width:auto !important; top:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
        powered by Vendor Site
    </a>
</div>
JD06
  • 191
  • 11
  • You may be out of luck with pure css. Look at [this question](http://stackoverflow.com/questions/11150684/can-i-override-inline-important). But javascript can do it easily enough. – TreeTree Jun 26 '14 at 02:42
  • try `div { z-index: 0; position: absolute; content: ''; text-indent: -9999px; }` – Tamil Selvan C Jun 26 '14 at 03:09

4 Answers4

1

No, it is not possible with pure CSS, as the !importants already declared in the HTML would override any CSS, unless there is a parent object not displayed above, that you can override.

If the !important tags were not there, the following would work:

Does it have any parent elements? You don't have any attributes to mess with on the parent div, so if this code is this code alone, you can try:

div { display: none; }

But that's a terrible idea and will hide all divs.

To apply css, you either name a classname,

<div class='parent-div'></div>

.parent-div { display: none; }

An id attribute:

<div id='parent-div'></div>

#parent-div { display: none; }

Or any other attribute:

<div animal='dog'></div>

div[animal='dog'] {display: none;  }

You could hide the child a tag:

a[href="http://vendorsite.com"] { display: none;  }
Community
  • 1
  • 1
dthree
  • 19,847
  • 14
  • 77
  • 106
1

Try:

div[style*="!important"] {
  max-height: 0;
  max-width: 0;
  overflow:hidden;
  padding: 0!important;
}

http://jsbin.com/fasid/11/

0

You can try something like this:

div[style*="!important"] {
  -webkit-transform: scale(0);
  -moz-transform:    scale(0);
  -ms-transform:     scale(0);
  -o-transform:      scale(0);
  transform:         scale(0);
}

/* And to make sure... */
div[style*="!important"] a {
  color: transparent;
}

The key is to find out which other attributes you can use to hide this element. Elements that have not been marked with !important on the html. Play around with text-indent for example.

gtramontina
  • 1,096
  • 9
  • 10
0

This is a tricky question, you don't have control over the code, nor have any selectors to use, and to make it worse there are a bunch of !important inline rules.

You could make it "vanish" though, the link will still be there but nobody will see it nor click on it, try something like this:

// Get the vendor's link
a[href="http://vendorsite.com"] {
  // Reset mouse cursor
  cursor: default;
  // Set color to match page background background
  color: white;
  // Remove pointer events to make it appear as plain text
  pointer-events: none;
  // Set background to match page background
  background: white;
}
// Set selection color to match page background color 
a[href="http://vendorsite.com"]::selection {
    background: white;
}
// Mozilla selector (optional)
a[href="http://vendorsite.com"]::-moz-selection {
    background: white;
}

Nasty but does the job. I've made a CodePen to show how it works: Hide with CSS

I hope this helps, cheers.

José SAYAGO
  • 798
  • 6
  • 15
  • you could simply use javascript: for the specified element, add the attribute 'display:none' – user3629249 Jun 26 '14 at 05:10
  • With JavaScript this could be done in a breeze. But the OP specified _CSS_ only, which is the reason why it makes this a tricky question. – José SAYAGO Jun 26 '14 at 05:12