How to hide binding with href #id tag using css

Question

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

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

I tried to use something like this:

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

Any idea how to do this?

Answer 1

Try using the attribute selector:

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

Or even just

 [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 with this class?

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

And in your CSS:

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

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

Answer 3

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

Answer 4

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

You can use it in another way, for example, header a[href*="#"] {display: none;} This way you will not ruin all the bindings on the site!

Answer 5

If you want to hide all tags that have href, you can do this:

 a[href] { display: none; } 

Answer 6

Assuming #wrap is the parent id, 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; }