MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The :fullscreen CSS pseudo-class selects any element that's displayed when the browser is in fullscreen mode.

/* Selects any <div> as long as it is being displayed in fullscreen mode */
/* Implemented in Gecko, Edge/IE, and WebKit/Chrome using prefixes */
/* Edge also supports the non-prefixed version */
div:-webkit-full-screen {
  background-color: pink;
}

div:-moz-full-screen {
  background-color: pink;
}

div:-ms-fullscreen {
  background-color: pink;
}

div:fullscreen {
  background-color: pink;
}

Note: The W3C spec uses the single word :fullscreen—without a dash—but both the Webkit and Gecko experimental implementations use a prefixed variant with two words separated by a dash: :-webkit-full-screen and :-moz-full-screen, respectively. Microsoft Edge and Internet Explorer use the standard convention: :fullscreen and :-ms-fullscreen, respectively.

Syntax

:fullscreen

Example

HTML

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p> This will become big red text when the browser is in fullscreen mode.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>
</div>

CSS

#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

#fullscreen:fullscreen > h1 {
  color: red;
}

#fullscreen:fullscreen > p {
  color: DarkRed;
}

#fullscreen:fullscreen > button {
  display: none;
}

Results

(If the 'Enter Fullscreen' button doesn't work, try here)

Specifications

Specification Status Comment
Fullscreen API
The definition of ':fullscreen' in that specification.
Living Standard Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 -webkit[1] 12 9.0 (9.0)-moz[1]
47.0 (47.0)[2]
11 -ms[3] ? 6.0 -webkit[1]
Select all elements in the fullscreen stack ? 12 43 (43) 11 ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) 9.0 (9.0)
47.0 (47.0)[2]
No support No support No support
Select all elements in the fullscreen stack ? (Yes) 43.0 (43) ? ? ?

[1] Both the Webkit and Gecko prefixed versions have a dash between full and screen, but the W3C proposal uses one single word: :fullscreen, :-webkit-full-screen, :-moz-full-screen.

[2] Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) implements the unprefixed pseudo-class behind the preference full-screen-api.unprefix.enabled, defaulting to false.

[3] Internet Explorer uses the prefix -ms but does not have a dash between full and screen: :-ms-fullscreen.

See also