JavaScript Document selectedStyleSheetSet Property

What You’ll Learn

Document.selectedStyleSheetSet is a deprecated instance property that names the style sheet set currently in use. Learn how to read and (in legacy browsers) set it, its link to enableStyleSheetsForSet and lastStyleSheetSet, and modern CSS theme alternatives.

Introduction

In the early web, authors could link multiple stylesheets with title attributes and let users (or scripts) switch between named style sheet sets—for example “Default” vs “High contrast.” document.selectedStyleSheetSet reports which set is active.

MDN: the selectedStyleSheetSet property indicates the name of the style sheet set that’s currently in use. You can read it and, in supporting browsers, assign a new set name to switch themes.

Related Document tutorials: preferredStyleSheetSet, lastStyleSheetSet, adoptedStyleSheets, Document constructor.

Understanding Document.selectedStyleSheetSet

A get/set instance property from the alternate stylesheet era. MDN marks it deprecated and non-standard.

• Value — name of the style sheet set currently in use (MDN).
• Assignment — switches active set; updates lastStyleSheetSet (MDN).
• Live — changing disabled on stylesheets affects this value (MDN).
• Equivalent to — document.enableStyleSheetsForSet(name) when setting (MDN).
• Status — Deprecated and Non-standard (MDN).

📝 Syntax

document.selectedStyleSheetSet

Read and write (MDN)

console.log(`Current style sheet set: ${document.selectedStyleSheetSet}`);

document.selectedStyleSheetSet = "Some other style sheet";

⚖️ Style Sheet Set Properties

Examples Gallery

Examples follow MDN Document: selectedStyleSheetSet. Many browsers will report the property as missing—that is expected.

const supported = "selectedStyleSheetSet" in document;
console.log("selectedStyleSheetSet supported?", supported);

selectedStyleSheetSet supported? false

if ("selectedStyleSheetSet" in document) {
  console.log(`Current style sheet set: ${document.selectedStyleSheetSet}`);
} else {
  console.log("Property not available in this browser");
}

Property not available in this browser

if ("selectedStyleSheetSet" in document) {
  console.log(`Before: ${document.selectedStyleSheetSet}`);
  document.selectedStyleSheetSet = "Some other style sheet";
  console.log(`After: ${document.selectedStyleSheetSet}`);
} else {
  console.log("Cannot switch — API not supported");
}

Cannot switch — API not supported

function reportStyleSheetSets() {
  if (!("selectedStyleSheetSet" in document)) {
    return "Style sheet set API not supported";
  }
  return {
    preferred: document.preferredStyleSheetSet,
    selected: document.selectedStyleSheetSet,
    last: document.lastStyleSheetSet
  };
}

console.log(reportStyleSheetSets());

Style sheet set API not supported

document.getElementById("theme-btn").addEventListener("click", () => {
  document.documentElement.classList.toggle("dark");
  const isDark = document.documentElement.classList.contains("dark");
  console.log("theme:", isDark ? "dark" : "light");
});

theme: dark
(on button click)

🚀 Common Use Cases

• Legacy code audits — find old theme switchers using set names.
• Migration planning — map set names to CSS class themes.
• Teaching history — explain pre-CSS-variable theme APIs.
• Do not use for new themes — use class toggles or custom properties.
• Firefox-era pages — some very old docs reference this API.
• Interviews — know the modern replacement by heart.

📝 Notes

• MDN: Deprecated and Non-standard — both banners shown above.
• Value is live — toggling disabled on stylesheets affects it (MDN).
• Setting the property updates lastStyleSheetSet; calling enableStyleSheetsForSet() alone does not (MDN).
• Often unavailable in Chromium and other modern engines.
• Related: preferredStyleSheetSet, lastStyleSheetSet, adoptedStyleSheets.

💡 Best Practices