Select a text node following an element

Question

How do I select (hide) the date in the following code?

<div class="myDiv">
  <h5>
    <strong>News header</strong> 2015-03-05
  </h5>
</div>

The problem is that the date has no id, no class nor a paragraph tag. Perhaps there's a way to use a sibling selector or similar?

I don't have access to the html, just the css.

If you haven't noticed already, the system automatically inserts a link to the duplicate at the very top of your question. It was wholly unnecessary to edit it *again* to say "Resolved here" just to point to the very same question. — BoltClock, Mar 05 '15 at 15:01

gvee · Accepted Answer · 2015-03-05T14:55:33.463

1

You can target it with some styling:

.myDiv h5 {
  color: red;
}
.myDiv h5 * {
  color: lime;
}

<div class="myDiv">
  <h5>
    <strong>News header</strong> 2015-03-05
  </h5>
</div>

However, your edit asks for showing/hiding of the date!

Unfortunately this cannot be achieved because hiding a parent element will also hide all the child elements within i.e. hiding .mdDiv h5 will hide everything inside it.

The only way to hide it separately is to place it within it's own element e.g.

<div class="myDiv">
  <h5>
    <strong>News header</strong> <span>2015-03-05</span>
  </h5>
</div>

Then you can attack it with .myDiv h5 span { display: none }

edited Mar 05 '15 at 14:55

answered Mar 05 '15 at 14:39

gvee

16,732
35
50

Your code snippet works here, but when I try to hide the date (which is what I try to do) it hides everything inside the h5-tag. – sand Mar 05 '15 at 14:48
Here's one more option on this [fiddle](http://jsfiddle.net/r58qs4op/) – Mahmoud Mar 05 '15 at 14:48
@sand ah, you never specified that! Unfortunately when you hide an element, it hides all of the child elements too. The only way round this is to put the thing you want to hide in its own separate element. – gvee Mar 05 '15 at 14:51
Yes, I just updated the original post with that detail. I see, thanks for your help! – sand Mar 05 '15 at 14:51
@sand answer updated too. – gvee Mar 05 '15 at 14:57
@sand there you go, I've updated the previous [demo fiddle](http://jsfiddle.net/r58qs4op/1/) . Hope this helps – Mahmoud Mar 05 '15 at 14:59
@gvee based on what @sand said "I don't have access to the html, just the css." so that solution won't work for him. And pass `display: none` for the current markup also will not help. So I suggested in [this demo](http://jsfiddle.net/r58qs4op/1/) to set the unwrapped text (which is date in our case) to `font-size: 0`. Cheers – Mahmoud Mar 05 '15 at 15:04

score 0 · Answer 2 · answered Mar 05 '15 at 14:43

not too sure of you try to achieve. if it is about styling color or bg, then overwrite css for the strong element:

h5 {
  color:purple;
  background:yellow;
  display:table;
}
h5 strong {
  color:yellow;
  background:purple;
}

<div class="myDiv">
  <h5>
    <strong>News header</strong> 2015-03-05
  </h5>
</div>

Select a text node following an element

2 Answers2