:fullscreen

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The :fullscreen CSS pseudo-class matches every element that is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.

Syntax

css
:fullscreen {
  /* ... */
}

Usage notes

The :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between fullscreen and traditional presentations.

Examples

Styling a Fullscreen Element

This example applies a different background color to a <div> element, depending on whether or not it is in fullscreen mode. It includes a <button> to toggle fullscreen on and off.

html
<div class="element">
  <h1>MDN :fullscreen pseudo-class demo</h1>

  <p>
    This demo uses the <code>:fullscreen</code> pseudo-class to automatically
    change the background color of the <code>.element</code> div.
  </p>

  <p>
    Normally, the background is light yellow. In fullscreen mode, the background
    is light pink.
  </p>

  <button class="toggle">Toggle Fullscreen</button>
</div>

The :fullscreen pseudo-class is used to override the background-color of the <div> when it is in fullscreen mode.

css
.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

The following JavaScript provides an event handler function that toggles fullscreen when the <button> is clicked.

js
document.querySelector(".toggle").addEventListener("click", function (event) {
  if (document.fullscreenElement) {
    // If there is a fullscreen element, exit full screen.
    document.exitFullscreen();
    return;
  }
  // Make the .element div fullscreen.
  document.querySelector(".element").requestFullscreen();
});

Demo

See the example live.

Specifications

Specification
Fullscreen API
# :fullscreen-pseudo-class

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:fullscreen
Select all elements in the fullscreen stack

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Uses a non-standard name.
Has more compatibility info.

See also