CSS selector for specific text

Question

<a href="#">Get Here</a>

I need to hide above link by using css (display:none).How can I select that (i.e. link with 'Get Here' text)

@j08691 This is not a duplicate.B'cos Solution is Unique one without using jQuery. — Sampath, Dec 19 '13 at 16:30
The point is that there's no CSS selector that can select based on an element's content. Yet. — j08691, Dec 19 '13 at 16:33

score 2 · Accepted Answer · answered Dec 19 '13 at 15:52

It isn't possible to target an element based on its content. but, it is possible to target an href based on its link:

<a href="go/there.html">Get Here</a>

a[href="go/there.html"]{}

If you can have a value other than # in your href, this approach could work.

score 1 · Answer 2 · answered Dec 19 '13 at 15:43

1

No, not possible for css. Css is made for styling elements, not selecting texts. You can do it with jquery though:

$("a:contains('Get Here')").hide();

answered Dec 19 '13 at 15:43

aksu

5,221
5
24
39

score 1 · Answer 3 · answered Dec 19 '13 at 15:44

1

Not with CSS, but using jQuery:

$("a:contains('Get Here')").hide();

or

$("a:contains('Get Here')").css('display','none');

answered Dec 19 '13 at 15:44

prograhammer

20,132
13
91
118

Can't I do this by only using css and pseudo selector ? – Sampath Dec 19 '13 at 15:46
@Sampath: No, take a look at the duplicates. – Adrift Dec 19 '13 at 15:46
@Adrift Nothing is Impossible for Willing Heart. Plz check the '@paceaux' answer :) – Sampath Dec 19 '13 at 16:09

score 1 · Answer 4 · answered Dec 19 '13 at 15:46

You can't do that with CSS. But even if you could, you shouldn't have done it, really. Never. Even forget about using javascript for this (if it was up to me I would exclude :contains filter from jQuery). This is very-very bad approach to style things. Because tomorrow you change the link text and your code breaks. What you really need to do is to use classes:

<a href="#" class="get-here">Get Here</a>

with the next CSS:

.get-here {
    display: none;
}

score 0 · Answer 5 · answered Dec 19 '13 at 15:47

If you need to do it automatically whenever that text appears (and you don't have control over the text), use jQuery as asku suggests.

If you have control over the text, it's much simpler to add a class to that link and style it. You can add the same class to all the links that need hiding.

HTML:

<a href="#" class="hide">Get Here</a>

CSS:

.hide {display: none}

score 0 · Answer 6 · edited Dec 19 '13 at 16:02

0

With CSS3 you could also use a[rel="#"] {display:none}

edited Dec 19 '13 at 16:02

Zach Saucier

24,871
12
85
147

answered Dec 19 '13 at 16:00

jksloan

184
1
4

CSS selector for specific text

6 Answers6