Hide proprietary div, p or a using CSS pseudo-classes

DISCLAIMER!! IT’S GOOD TO ALLOW YOU BLOG OR SITE LINK TO A PROVIDER’S SITE ESPECIALLY IF YOU GOT FREE STUFF FROM THEM. USING THIS HACK TO REMOVE LINKS IS NOT EXPRESSLY SUPPORTED BY THE AUTHOR.

Ever downloaded a lot of proprietary software and found it annoying that every page on your site has: Powered by… blah at the bottom. After reading this piece you should have learnt to use pseudo-classes in CSS to remove such.

You can remove these easily if the block were surrounded by a div, p or a element with a class attribute. e.g. if when you inspect the “powered by” element in the page and have something like this:

 

 

<div class="blah_powered_by">
   Powered by: <a href="http://blah.blah">blah</a>
</div>

 

 

This can easily be hidden by including the following in your stylesheet:

p.blah_powered_by{
    display:none;
}

But how do you hide:

<div style="text-variant: capitalize; font-size: xx-small;">
Powered by: <a href="http://blah.blah">blah</a>
</div>

or

<div>
    Powered by: <a href="http://blah.blah">blah</a>
</div>

This requires making use of pseudo-classing for the two samples above.

For the first the pseudo class that will hide it is:


div[style="text-variant: capitalize; font-size: xx-small;"]{
display:none;
}

And the second?:


a[href="http://blah.blah"]{
display:none;
}

Unfortunately, CSS does not allow selecting of the parent element. so for the second option, we only get to hide the link. Using the more advanced XPath selector scheme is the only way we get to hide the whole block. Unless you are willing to do:


div{
display:none;
}

div.displayed{
block;
}

then add a class="displayed" to every div in your pages.

There are a lot more things one can achieve by using the CSS pseudo-class selector. Do share what you have done with them.