A pseudo-classe :fullscreen do CSS representa os elementos que estão atualmente no modo tela-cheia. Se vários elementos estiverem em tela-cheia, isto seleciona todos.


Error: could not find syntax for this item

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.


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.


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.


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;


Specification Status Comment
Fullscreen API
The definition of ':fullscreen' in that specification.
Padrão em tempo real Initial definition.

Compatibilidade com navegadores

BCD tables only load in the browser

See also