CSS :fullscreen Selector

What You’ll Learn

The :fullscreen pseudo-class styles elements when they occupy the entire screen through the Fullscreen API or native media controls.

Introduction

The :fullscreen selector in CSS is used to style elements when they are in fullscreen mode.

This pseudo-class becomes active when an element is displayed using the Fullscreen API, typically triggered by the user clicking a button or through JavaScript.

It is a useful tool for enhancing the visual experience when elements are displayed fullscreen — such as videos, image galleries, presentations, or interactive sections of a webpage.

Definition and Usage

Append :fullscreen to a selector with no space before the colon: :fullscreen, video:fullscreen, or div:fullscreen. Styles apply only while the element is in fullscreen and revert when the user exits (usually by pressing Esc).

📝 Syntax

The syntax for the :fullscreen pseudo-class is:

:fullscreen {
  /* CSS properties */
}

Basic Example

/* Default styling */
#player {
  width: 300px;
  height: 200px;
  background: #93c5fd;
}

/* When in fullscreen mode */
:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #1e3a8a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript Trigger

const el = document.getElementById('player');

// Enter fullscreen (modern browsers)
el.requestFullscreen();

// Exit fullscreen
document.exitFullscreen();

Syntax Rules

• Only matches elements currently in fullscreen mode.
• Combine with element types: video:fullscreen, div:fullscreen.
• Use vw and vh to fill the viewport reliably.
• Pair with ::backdrop to style the area behind the element.
• Listen for the fullscreenchange event to update UI state in JavaScript.

Related Selectors & APIs

• ::backdrop — styles the backdrop layer behind a fullscreen element
• :focus — style the button that triggers fullscreen
• :hover — preview hover state on the fullscreen toggle
• document.fullscreenElement — JavaScript property for the active fullscreen element

When to Use :fullscreen

:fullscreen helps create immersive, fullscreen experiences:

• Video players — Enlarge background, hide chrome, center content when a video goes fullscreen.
• Image galleries — Expand a photo to fill the screen with custom styling.
• Presentations & slides — Style slide containers for kiosk or demo mode.
• Games & interactive apps — Adapt layout when a canvas or game container enters fullscreen.
• Reading mode — Expand an article section for distraction-free reading.

Examples Gallery

Practice :fullscreen with divs, videos, flexible viewport units, and backdrop styling.

<style>
  #fullscreen-element {
    width: 300px;
    height: 200px;
    background: #93c5fd;
    text-align: center;
    line-height: 200px;
  }

  :fullscreen {
    width: 100vw;
    height: 100vh;
    background: #1e3a8a;
    color: #fff;
    font-size: 2em;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div id="fullscreen-element">Click to Go Fullscreen</div>
<button id="fullscreen-btn">Enter Fullscreen</button>

<script>
  const el = document.getElementById('fullscreen-element');
  document.getElementById('fullscreen-btn').addEventListener('click', () => {
    el.requestFullscreen();
  });
</script>

video {
  width: 100%;
  max-width: 640px;
  border-radius: 0.5rem;
}

video:fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
  border-radius: 0;
}

.slide:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a8a, #312e81);
  color: #fff;
  font-size: clamp(1.5rem, 4vw, 3rem);
}

#gallery:fullscreen {
  background: #fff;
  padding: 2rem;
}

#gallery:fullscreen::backdrop {
  background: rgba(15, 23, 42, 0.9);
}

💬 Usage Tips

• Combine :fullscreen with specific elements (video:fullscreen, div:fullscreen) for precise targeting.
• Use flexible units like vw and vh so designs adapt to any screen size in fullscreen.
• Provide a visible button to enter and exit fullscreen — do not rely on hidden gestures alone.
• Listen for fullscreenchange to toggle icons (expand/compress) in your UI.
• Test on mobile — some browsers handle fullscreen differently on iOS Safari.

⚠️ Common Pitfalls

• Requires Fullscreen API — :fullscreen only works after requestFullscreen() or native media controls — CSS alone cannot trigger it.
• Element limitations — Not all elements support fullscreen in every browser (e.g., some iframe restrictions).
• Vendor prefixes — Older browsers used :-webkit-full-screen and :-moz-full-screen; modern browsers support standard :fullscreen.
• Forgetting exit path — Always let users exit with Esc or an explicit exit button.
• Fixed positioning confusion — position: fixed is not the same as fullscreen; only the Fullscreen API triggers :fullscreen.

💡 Best Practices