How to hide an anchor tag by href #id using css

Question

I have different anchor tags with href=#ids and I need to hide them using a general css rule for all of them,

Content xxxxxxxxx <a href="#tab1">Table 1</a>.Content xxxxxxxxxxxx <a href="#tab2">Table 2</a>

I was trying to use something like this:

#wrap a='#tab1'{
display:none;
}

Any idea how to do it?

Answer 1

Try using attribute selectors:

a[href='#tab1']{ display: none }

Or even simply

[href='#tab1']{ display: none }

http://www.w3.org/TR/CSS2/selector.html

Answer 2

Why not just create a CSS class for your anchors and hide them using that class?

<a href="#tab1" class="hiddenTab">foo</a>

And in your CSS:

a.hiddenTab {visibility:hidden; display:none;}

All the anchors you'd want to hide would just use "class='hiddenTab'"

Answer 3

#wrap a[href="#tab1"]{
display:none;
}

Answer 4

Try using a[href*="#"] {display: none;} This selectors identifies a # in the href attribute of an anchor and if found it applies the style

You can use it in another way such as header a[href*="#"] {display: none;} So you don't mess all the anchors on the site!

Answer 5

If you want to hide all a tags which have href set, you can do this:

a[href] { display: none; }

Answer 6

Assuming #wrap is an id of a parent, you can use:

/* Hide all anchor tags which are children of #wrap */
#wrap a{ display:none; }

/* Hide all anchor tags which are direct children of #wrap */
#wrap > a{ display:none; }

/* Hide a specific anchor tag (Probably won't work in IE6 though) */
a[href="#tab1"]{ display:none; }