Daniel Nabais Daniel Nabais - 1 year ago 92
HTML Question

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

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


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


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


Answer Source

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:


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


@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/