CSS priorities don't seem to working

Question

Hello

I have this in the footer file of a wordpress theme.

<div class="footer">
<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->

    <div id="icons">
    <ul>
    <li><a href="#">Wordpress</a></li>
    </ul>
    </div>

    <p>
    <?php wp_tag_cloud( 'separator= | ' ); ?> 
    </p>
</div>

And I want to apply this CSS, which is at the end of my CSS file:

#icons ul li a{
    visibility:hidden !important;
}

I've tried a dozen variations of the above CSS / HTML and I seem unable to select the links in li elements in the div#icons.

I've tried every trick I know!

Answer 1

One thing to try is moving that CSS selector to the top of your CSS file, it might be getting overridden by another rule above it.

I created a page using just that code and the wordpress link does not show (but the bullet does) so the CSS you have does select the link and hide it. That is why I think another more specific style might be taking over.

If that doesn't work try making the selector .footer #icons ul li a. And see if that works.

Answer 2

<a> does not have a visibility property

w3schools

try wrapping your hyperlink with a <div>

Answer 3

Simple solution. I'd used html comments instead of CSS comments before the style rules with the problem. As these were the last to apply I didn't notice that anything was broken.