:fullscreen
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The :fullscreen CSS pseudo-class matches every element that is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.
Syntax
:fullscreen {
/* ... */
}
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 fullscreen and traditional presentations.
Examples
Styling a fullscreen element
This example applies a different background color to a
This demo uses the
Normally, the background is light yellow. In fullscreen mode, the background
is light pink.
The The following JavaScript provides an event handler function that toggles fullscreen when the to toggle fullscreen on and off.
:fullscreen pseudo-class demo:fullscreen pseudo-class to automatically
change the background color of the .element div.
:fullscreen pseudo-class is used to override the background-color of the .element {
background-color: lightyellow;
}
.element:fullscreen {
background-color: lightpink;
}
is clicked.document.querySelector(".toggle").addEventListener("click", (event) => {
if (document.fullscreenElement) {
// If there is a fullscreen element, exit full screen.
document.exitFullscreen();
return;
}
// Make the .element div fullscreen.
document.querySelector(".element").requestFullscreen();
});
Specifications
Specification Selectors Level 4
# selectordef-fullscreenFullscreen API
# css-pc-fullscreenBrowser compatibility
See also