:fullscreen

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

Syntax

: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 full-screen and traditional presentations.

Example

In this example, the color of a button is changed depending on whether or not the document is in full-screen mode. This is done without needing to specifically apply style changes using JavaScript.

HTML

The page's HTML looks like this:

<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.</p>

<button id="fs-toggle">Toggle Fullscreen</button>

The <button> with the ID "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.

CSS

The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Full-screen Mode" button when the element is not in a full-screen state. The key is the use of the :not(:fullscreen), which looks for the element to not have the :fullscreen pseudo-class applied to it.

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

When the document is in full-screen mode, the following CSS applies instead, setting the background color to a pale shade of red.

#fs-toggle:fullscreen {
  background-color: #faa;
}

Specifications

Browser compatibility

See also

• Fullscreen API
• Guide to the Fullscreen API
• :not
• ::backdrop
• DOM API: Element.requestFullscreen(), Document.exitFullscreen(), Document.fullscreenElement
• allowfullscreen attribute