# fullscreen pseudo-class

The pseudo-class `fullscreen` sets a style of elements for full-screen browser mode. In order to switch from the standard page display mode to full screen and back, you need to press the `F11` key on the keyboard.

## Syntax

`selector:fullscreen { }`

## Example

Let's click to expand the element with text in full screen mode and recolor its background:

`<div id="txt"> Full screen </div> <p> <button onclick="fullScreen()">Click</button> </p>` `body { margin: 0; } #txt { padding: 10px; background: #467CBC; color: white; width: 200px; } #txt:-webkit-full-screen { background: #E37D76; } #txt:-moz-full-screen { background: #E37D76; } #txt:-ms-fullscreen { background: #E37D76; }` `function fullScreen() { let elem = document.getElementById('txt'); // Getting the element if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); // Chrome, Opera, Safari else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen(); // Firefox else if (elem.msRequestFullscreen) elem.msRequestFullscreen(); // Internet Explorer, Edge else if (elem.requestFullscreen) elem.requestFullscreen(); // Стандарт }`

:

## See also

- the `:default` pseudo-class
  that sets a default style for elements
- the `scroll-behavior` property
  that specifies scrolling behavior within an element

← →
↑
en ru