:fullscreen CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :fullscreen pseudo-class in CSS is used to apply styles to elements that are currently being displayed in fullscreen mode. Fullscreen mode is a special state where an element, such as a video or a div, occupies the entire screen, hiding browser interface elements like the address bar, tabs, and scrollbars. This pseudo-class is particularly useful for enhancing user experience when media or interactive content needs to take over the whole viewport.

When an element enters fullscreen via JavaScript using the Fullscreen API (for example, calling element.requestFullscreen()), the :fullscreen pseudo-class becomes active on that element. You can then style it differently to improve readability, emphasize controls, or adapt layout, font sizes, and other CSS properties to fit the fullscreen context. Similarly, you can use it to hide unnecessary content or adjust z-index for layering.

A helpful feature of :fullscreen is its ability to target both the element in fullscreen and its descendants. For instance, to style a video element differently when it’s fullscreen, you can use:

video:fullscreen {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

video:fullscreen::-webkit-media-controls {
    background-color: rgba(0, 0, 0, 0.7);
}

Here, the first rule ensures that the video fills the entire viewport, while the second demonstrates styling pseudo-elements of the media controls for WebKit-based browsers.

The :fullscreen pseudo-class can also be combined with other pseudo-classes or selectors, allowing nuanced control over nested elements when an ancestor is in fullscreen. For example, you could enlarge captions or overlay information only when the parent element is fullscreen, ensuring the interface adapts to the user’s immersive experience.

This pseudo-class is widely supported in modern browsers, though some require vendor prefixes like ::-webkit-full-screen for older versions of WebKit-based browsers. Using :fullscreen effectively allows developers to create seamless fullscreen experiences for videos, games, slideshows, and other interactive content.

Syntax

:fullscreen {
  /* ... */
}

Example

HTML

<body>

    <div class="container">

        <button id="fullscreen-btn">Go Fullscreen</button>

        <div class="box">

            <p>This box can go fullscreen!</p>

        </div>

    </div>



    <script>

        const btn = document.getElementById('fullscreen-btn');

        const box = document.querySelector('.box');



        btn.addEventListener('click', () => {

            if (box.requestFullscreen) {

                box.requestFullscreen();

            } else if (box.webkitRequestFullscreen) { /* Safari */

                box.webkitRequestFullscreen();

            } else if (box.msRequestFullscreen) { /* IE11 */

                box.msRequestFullscreen();

            }

        });

    </script>

</body>

CSS

body {

    font-family: Arial, sans-serif;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 50px;

}



.container {

    text-align: center;

}



.box {

    width: 300px;

    height: 200px;

    background-color: lightblue;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 20px;

    transition: all 0.3s ease;

}



/* Fullscreen styles */

.box:fullscreen {

    width: 100vw;

    height: 100vh;

    background-color: coral;

    color: white;

    font-size: 2rem;

    display: flex;

    align-items: center;

    justify-content: center;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :fullscreen pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.