Can I hide a HTML tag by the content/value it contains?

Question

I'm attempting to hide a h1 tag from one page, now it's a dynamic page so their are not any hooks that I can target. I was hoping their would be a quick fix from CSS to target the content.

I've done some research and attempted the following methods:

<div id="pageH1">
<h1>value</h1>
<div class="clear"></div>
</div>


h1[att~=value] {
    display:none;
}

h1[att=value] {
    display:none;
}

However neither have worked, I was wondering if this was something that can be done with CSS or will I need to use JS?

If I understand OP issue correctly, he wants to use selector for query `
randomvalue
`. `:empty` will not help in this case. Also it not so related to question in topic. — Tommi, Jul 18 '13 at 19:35

score 0 · Answer 1 · answered Jul 11 '13 at 15:39

You can't do this via CSS, This may become a feature of CSS4, but does not work as of CSS3.

You will have do this via javascript.

Here is a simple jQuery example. (View the JSFiddle)

$('h1:contains("value")').hide(); // Hide any h1 element that contains "value"

The above code will match ALL of the following lines.

<!-- All three h1 tags will be matched -->
<h1>value<h1>
<h1>value #2<h1>
<h1>This is another h1 with "value" #3</h1>

You could add a .no-hide class and do the following:

// Hide all h1 tags with value, EXCEPT .no-hide
$('h1:contains("value"):not(.no-hide)').hide();

This would result in:

<h1>value</h1>                                             <!-- Hidden -->
<h1>value #2</                                             <!-- Hidden -->
<h1>This is another h1 with "value" #3</h1>                <!-- Hidden -->
<h1 class="no-hide">This has value but will not hide</h1>  <!-- NOT Hidden -->

Doing what you require in pure CSS is currently impossible (to my knowledge Correct me if im wrong).

score 0 · Answer 2 · answered Jul 11 '13 at 15:43

While no CSS solution exists, a simple JavaScript function may solve your problem

function forContent (selector, content, action) {
  [].forEach.call (document.querySelectorAll (selector), function (h) {
    (content === null ||
     typeof content == 'function' && content (h.innerHTML) ||
     typeof content == 'string' && content == h.innerHTML ||
     content.test && content.test (h.innerHTML)) && action (h);
  });
}

See the sample fiddle : http://jsfiddle.net/jstoolsmith/uL9DZ/

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

:empty

There is to be a css selector .. we hope, will be approved soon.

For your situation, i don't recommend using :empty yet.

I'd use jQuery.

if ($('#element').is(':empty')){
  //your coding
}

or

if ($('h1').is(':empty')){
  //your coding
}

Just apply a routine for 'each' to be 'removed' if empty.

$( 'h1:empty' ).remove(); /* take the h1 OUT of the DOM */

or

$( 'h1:empty' ).hide(); /* display:none, visibility:hidden, opacity:0 */

edited May 23 '17 at 11:45

Community

1
1

answered Jul 18 '13 at 15:35

Milche Patern

19,632
6
35
52

1

Selectors 3, which includes `:empty`, has been a [W3C Recommendation](http://www.w3.org/TR/css3-selectors) for over a year now. I'm not sure why you're linking to the editor's draft of that spec. – BoltClock Jul 18 '13 at 15:40
TY BoltClock, i made a correction. – Milche Patern Jul 18 '13 at 15:44

score -3 · Answer 4 · answered Jul 11 '13 at 15:40

-3

You can use visibility as hidden like

h1

{

visibility:hidden;

}

by using this u can hide h1 tag.....

answered Jul 11 '13 at 15:40

Ajinkya

1
1

But you won't be able to display the tag based on its content. – biphobe Jul 11 '13 at 15:41

Can I hide a HTML tag by the content/value it contains?

randomvalue

4 Answers4