How can I hide with CSS only? - html

Question

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>

Answer 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; }

Answer 2

Try:
div[style*="!important"] {
max-height: 0;
max-width: 0;
overflow:hidden;
padding: 0!important;
}
http://jsbin.com/fasid/11/

Answer 3

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.

Answer 4

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.