:fullscreen CSS Pseudo Class

Description

The :fullscreen pseudo-class in CSS is used to target an element when it is displayed in full-screen mode. This class is typically used with the ::backdrop pseudo-element to style the backdrop behind the full-screen element.

For example, you can use :fullscreen to apply styles to an element when it's in full-screen mode, like changing its background color or text color. Here's a simple example of how it might be used:

:fullscreen {

  background-color: black;

  color: white;

}

In this example, when an element enters full-screen mode, it will have a black background with white text. This can be especially useful when you want to customize the appearance of content when it takes up the entire screen, such as in a video player or presentation mode.

Syntax

:fullscreen {
  /* ... */
}

Example

HTML

<div class="container">

  <p><em>Click the button below to enter the element into fullscreen mode.</em></p>

  <div class="element" id="element">

    <p>I'm in fullscreen mode!</p>

  </div>

  <br>

  <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>

</div>

CSS

em {

  font-size: 0.9em;

}

.container {

  width: 90%;

}

.element {

  padding: 20px;

  height: 100px;

  width: 100%;

  background-color: #7ef3d1;

}

.element p {

  visibility: hidden;

  text-align: center;

  color: white;

  font-size: 3em;

}

.element:-webkit-full-screen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:-webkit-full-screen p {

  visibility: visible;

}

.element:-moz-full-screen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:-moz-full-screen p {

  visibility: visible;

}

.element:-ms-fullscreen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:-ms-fullscreen p {

  visibility: visible;

}

.element:fullscreen {

  background-color: #e07ef3;

  width: 100vw;

  height: 100vh;

}

.element:fullscreen p {

  visibility: visible;

}

Result

Editor

Notes

Internet Explorer supports the pseudo -class: -ms-fullscreen.
Chrome, Opera, Safari support the pseudo -class: -webkit-full-screen.
Firefox supports the pseudo-class : -moz-full-screen.
Pseudo-classes for each browser should be written separately, but not separated by commas.