CSS "inner-html" technique? [duplicate]

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!

Dessert

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 – Unscreened

#5442180 – Percolate

Answer 1

With pure CSS, that’s impossible.

Caenogenesis

Ahh. Okay, I was afraid of that. Thanks! – Dessert

Answer 2

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

Beni

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! – Dessert

Answer 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.

Carp

Why not just add a class? – Submergible