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?

score 16 · Answer 1 · answered Feb 06 '12 at 18:49

16

Try using attribute selectors:

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

Or even simply

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

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

answered Feb 06 '12 at 18:49

graphicdivine

10,937
7
33
59

4

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? – roesslerj Jan 19 '15 at 14:09
I don't understand the comment: why you want a user to be able to click on a link that is hidden? – graphicdivine Apr 01 '15 at 10:38
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. – roesslerj Apr 02 '15 at 20:46
3

Ah. I see. You could try: `position:absolute; visibility: hidden` – graphicdivine Apr 07 '15 at 08:44

score 13 · Answer 2 · answered Feb 06 '12 at 18:59

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

score 4 · Answer 3 · answered Feb 06 '12 at 18:58

4

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

answered Feb 06 '12 at 18:58

frazras

5,928
4
30
40

Thank you @frazras you save my life – Pranay Kumbhalkar May 31 '18 at 13:10

score 2 · Answer 4 · answered Nov 13 '15 at 17:32

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!

score 2 · Answer 5 · answered Feb 06 '12 at 19:00

2

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

a[href] { display: none; }

answered Feb 06 '12 at 19:00

Ninja

5,082
6
37
59

score 0 · Answer 6 · answered Feb 06 '12 at 18:55

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; }

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

6 Answers6

Linked