:fullscreen

The :fullscreen CSS pseudo-class allows you to select and style any element that is currently in fullscreen mode. You know those times you allow an image or some other element to take up the full screen? Well, we can style elements when they’re in that state and that’s what :fullscreen lets us do.

.element:fullscreen {
  font-size: 3em;
  text-align: center;
}

And, in those cases where more than one element is in fullscreen mode, this selects them all.

Fullscreen mode and the Fullscreen API

Hey, big heads up here. There’s a difference between making your app fullscreen at the OS level and making an element fullscreen. If you switch to your browser’s fullscreen mode (⌃+CMD+F on MacOS, F11 on Windows) and you select an element using :fullscreen, it won’t match that element. Instead, an element matches :fullscreen when it enters fullscreen mode using the Fullscreen API.

let element = document.querySelector(".element");

element.requestFullscreen();

So let’s say we want to bring the content inside a <section> element to the center of the viewport when it is in fullscreen mode. We target it with :fullscreen, then style accordingly:

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

We can select the children of fullscreen elements

Similarly, we can select the children of an element that’s selected in fullscreen mode, say the paragraphs in that <section> element:

section:fullscreen p {
  font-size: 2em;
}

Trick: Only style when not in fullscreen mode

And if we want apply styles only when the element is not in fullscreen mode, we can use it alongside the :not pseudo-class:

section:not(:fullscreen) {
  background: #eee;
}

Browser support

Some older browsers might need a vendor prefix, like :-ms-fullscreen in Internet Explorer 11.

IE	Edge	Firefox	Chrome	Safari	Opera
11 1	All	64 2	71 3	6 4	58 5

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	No	91	No	62

Demo

The following demo shows how we can control background of the image element in fullscreen mode. Click the button to toggle fullscreen mode for the image and see the fullscreen styles take effect.

More information

Related