W3docs
en
Log in

CSS :fullscreen Pseudo Class

Use the :fullscreen CSS selector for selecting the element displaying in fullscreen mode. Read about the pseudo-class and practice with examples.

The :fullscreen pseudo-class selects and styles an element that is being displayed in fullscreen mode.

Example of CSS :fullscreen Pseudo Class

The :fullscreen selector works when the fullscreen mode is entered.

Info

Modern browsers support the unprefixed :fullscreen pseudo-class. Legacy -webkit- and -moz- prefixes are largely obsolete, and -ms- is no longer supported.

Version

Fullscreen API

Syntax

CSS :fullscreen syntax example

:fullscreen {
  css declarations;
}

Note: Entering fullscreen mode requires a user gesture. The button in this example correctly provides that trigger.

Example of the :fullscreen selector:

CSS :fullscreen code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 10px;
        height: 200px;
        width: 95%;
        background-color: #1c87c9;
      }
      .example p {
        visibility: hidden;
        text-align: center;
        color: #eeeeee;
        font-size: 3em;
      }
      .example:fullscreen {
        background-color: #8ebf42;
        width: 100vw;
        height: 100vh;
      }
      .example:fullscreen p {
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <h2>:fullscreen pseudo-class example</h2>
    <div class="container">
      <div class="example" id="example">
        <p>Fullscreen mode</p>
      </div>
      <br />
      <button onclick="document.getElementById('example').requestFullscreen();">Click here</button>
    </div>
  </body>
</html>
Try it Yourself »
Note

You can also use the :backdrop pseudo-element to style the background behind the fullscreen element (e.g., :fullscreen::backdrop { background: #000; }).

Practice

Practice

What are the ways to make a webpage fullscreen as mentioned in the article from W3Docs?