2

I'm trying to use the CSS pseudo selector for fullscreen, to hide an element when the page is in fullscreen mode.

:-moz-full-screen section.instructions,
:-webkit-full-screen section.instructions,
:-ms-fullscreen section.instructions,
:fullscreen section.instructions {
  display: none;
}

In Firefox, this rule is ignored. If I try to use document.querySelector(), it says it's not a valid selector.

If I reduce it just to the Mozilla prefix:

:-moz-full-screen section.instructions {
  display: none;
}

... this works fine.

For any other prefixed sort of selectors, I've always been able to separate them by commas. What makes this one different? Is this just a Firefox bug? Do I really have to write all my rules out separately for each browser now?

Brad
  • 159,648
  • 54
  • 349
  • 530
  • 1
    "For any other prefixed sort of selectors, I've always been able to separate them by commas. What makes this one different?" It's a pseudo-class. The ones that worked for you were probably all pseudo-elements, which used to work in WebKit (I don't know if it still does now), though I'd be surprised if any of them ever worked in Firefox, because this has been how Firefox and other non-WebKit browsers have behaved for as long as I can remember. – BoltClock Nov 23 '17 at 03:43
  • I was facing the same problem and found a gist example of Chris Cheshire (https://gist.github.com/cjcheshire/2966063) which solved my issue. If you are using Sass, you could solves this with a mixin and avoid to duplicate your css code. – David Dal Busco Mar 16 '19 at 08:45

0 Answers0