CSS "inner-html" technique?

Question

I was wondering if there was a way to query elements according to the word it contains. So, if I have:

<div id="globalPageHeader">
    <h1>Home</h1>
</div>

I want any #globalPageHeader h1 that has the word Home in it, to have a display property of none.

Obviously this example wouldn't work, but I was wondering if there's something like it:

#globalPageHeader h1(innerHTML == "Home") {
     display: none;
}

I don't want to use JavaScript's innerHTML because I have no access to the javascript parts of the admin.

Any help is much appreciated!

There used to be a contains() pseudo class - but it was removed for who knows why - however, jQuery still supports it in their sizzle selector — Kevin Pei, Mar 26 '13 at 02:09
http://stackoverflow.com/questions/5441680/css-selector-based-on-element-text — digitalextremist, Mar 26 '13 at 02:10

Marat Tanalin · Accepted Answer · 2017-05-10T16:32:32.990

21

With pure CSS, that’s impossible.

edited May 10 '17 at 16:32

answered Mar 26 '13 at 02:08

Marat Tanalin

score 5 · Answer 2 · answered Mar 26 '13 at 02:11

5

This is not possible using CSS. You can, however, do it using jQuery. Why not just add a class to the desired h1 tags?

answered Mar 26 '13 at 02:11

JQM Rookie

Yeah, I would do that, except since it's global, it's a lot of work. Plus, no jQuery because I don't have access to the JavaScript side of the admin. Thanks, though! – randmath Mar 26 '13 at 02:47

Adrian Garcia · Answer 3 · 2014-09-16T08:13:00.153

3

I had a similar problem. What you can do is to add an attribute to the <h1> element. For example title :

<div id="globalPageHeader">
    <h1 title='Home'>Home</h1>
</div>

And then in the CSS:

#globalPageHeader h1[title = 'Home'] {
     display: none;
}

It worked for me.

edited Sep 16 '14 at 08:13

answered Sep 16 '14 at 08:07

Adrian Garcia

3 Answers3