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?

Solution 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

Solution 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'"

Solution 3

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

Solution 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!

Solution 5

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

a[href] { display: none; }

View more solutions

Comments

[roesslerj]

But if the anchor has display: none it is no longer active (meaning, clicking on a link to this anchor won't e.g. scroll down). And with visibility: hidden the anchor still uses the same space. Any solution to this?

[graphicdivine]

I don't understand the comment: why you want a user to be able to click on a link that is hidden?

[roesslerj]

The link itself is not hidden, only the anchor that it refers to. The problem was that (in the system generating the HTML) I had no access to the original text that I wanted to scroll to and I didn't want to add some additional text just to be able to place an anchor.

[graphicdivine]

Ah. I see. You could try: position:absolute; visibility: hidden

[Pranay Kumbhalkar]

Thank you @frazras you save my life