nth-of-type(x) (with media queries) not working properly in Safari 9.1.1

Question

I have the following piece of code that works perfectly in Chrome but not in Safari.

HTML

<p id="info">first line
<span> &emsp;|&emsp;</span> 
<span><br></span>
second line
</p>

CSS

@media (min-width: 800px) {
#info span { display:  inline; }
#info span:nth-of-type(2) {display: none; }
}

@media (max-width: 800px) {
#info span { display:  none; }
#info span:nth-of-type(2) {display: table-column;}
}

I've initially coded this with nth-child(x) but I read the this isn't supported by Safari. I replaced it with nth-of-type(x) but it still doesn't work properly.

If you start with a 'small' column width and then make it bit, it works. If you shrink it again, that's where Safari fails.

Inspecting the page under Safari I can see that the CSS property display: none; is applied but it seems like there's a leftover
left behind or something....

Here's a jsfiddle with it, working on Chrome but not on Safari: https://jsfiddle.net/auhbrmzg/2/

Just 'fiddle' with the result column width to see it in action.

Thanks in advance for your input.

Cheers.

Answer 1

The selector is working. If you inspect the element inside of Safari you will find that it is adding the style "display:none". The problem is that "display:none" has no effect on the break tag. Essentially the tag is still there even with the style being set to "display:none;".

Here's an alternative to what you've got:

HTML:

<p id="info">
  <span>first line</span>
  <span> &emsp;|&emsp;</span> 
  <span>second line</span>
</p>

CSS:

@media (min-width: 800px) {
    #info span { display:  inline; }
}

@media (max-width: 800px) {
    #info span {display:block;}
    #info span:nth-child(2) { display:  none; }
}

Fiddle: https://jsfiddle.net/fyqx97zo/9/