CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Nesting Module</title> <meta content="WD" name="w3c-status"> <meta content="Bikeshed version 2b7cf6020, updated Fri Feb 10 17:54:11 2023 -0800" name="generator"> <link href="https://www.w3.org/TR/css-nesting-1/" rel="canonical"> <meta content="3f8bb03fa2c86a9c1e114fb9ddc67e3137ea4c80" name="document-revision"> <style>/* style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; }</style> <style>/* style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; }</style> <style>/* style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } .dfn-panel { position: absolute; z-index: 35; height: auto; width: -webkit-fit-content; width: fit-content; max-width: 300px; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0; } .dfn-panel li { list-style: inside; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled { cursor: pointer; } </style> <style>/* style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; }</style> <style>/* style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* style-syntax-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ </style> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-WD" rel="stylesheet"> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Nesting Module</h1> <a href="https://www.w3.org/standards/types#WD">W3C Working Draft</a>, <time class="dt-updated" datetime="2023-02-14">14 February 2023</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://www.w3.org/TR/2023/WD-css-nesting-1-20230214/">https://www.w3.org/TR/2023/WD-css-nesting-1-20230214/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-nesting-1/">https://www.w3.org/TR/css-nesting-1/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-nesting/">https://drafts.csswg.org/css-nesting/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-nesting-1">https://www.w3.org/standards/history/css-nesting-1</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-nesting-1">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="112669"><a class="p-name fn u-url url" href="https://nerdy.dev">Adam Argyle</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-nesting-1/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a> This document was published by the <a href="https://www.w3.org/groups/wg/css">CSS Working Group</a> as a Working Draft using the <a href="https://www.w3.org/2021/Process-20211102/#recs-and-notes">Recommendation track</a>. Publication as a Working Draft does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-nesting” in the title, like this: “[css-nesting] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-nesting%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/2021/Process-20211102/" id="w3c_process_revision">2 November 2021 W3C Process Document</a>. This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/">W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/groups/wg/css/ipr" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#placement">1.1 Module Interactions</a> <li><a href="#values">1.2 Values</a> <li><a href="#motivation">1.3 Motivation</a> </ol> <li> <a href="#nesting">2 Nesting Style Rules</a> <ol class="toc"> <li><a href="#syntax">2.1 Syntax</a> <li> <a href="#conditionals">2.2 Nesting Other At-Rules</a> <ol class="toc"> <li><a href="#nesting-at-scope">2.2.1 Nested @scope Rules</a> </ol> <li><a href="#mixing">2.3 Mixing Nesting Rules and Declarations</a> </ol> <li><a href="#nest-selector">3 Nesting Selector: the & selector</a> <li> <a href="#cssom">4 CSSOM</a> <ol class="toc"> <li><a href="#cssom-style">4.1 Modifications to <code class="idl">CSSStyleRule</code></a> </ol> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#idl-index"> IDL Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> This section is not normative. This module describes support for nesting a style rule within another style rule, allowing the inner rule’s selector to reference the elements matched by the outer rule. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability. <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module Interactions<a class="self-link" href="#placement"></a></h3> This module introduces new parser rules that extend the <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> parser model. This module introduces selectors that extend the <a data-link-type="biblio" href="#biblio-selectors4" title="Selectors Level 4">[SELECTORS4]</a> module. <h3 class="heading settled" data-level="1.2" id="values">1.2. Values<a class="self-link" href="#values"></a></h3> This specification does not define any new properties or values. <h3 class="heading settled" data-level="1.3" id="motivation">1.3. Motivation<a class="self-link" href="#motivation"></a></h3> The CSS for even moderately complicated web pages often include lots of duplication for the purpose of styling related content. For example, here is a portion of the CSS markup for one version of the <a data-link-type="biblio" href="#biblio-css-color-3" title="CSS Color Module Level 3">[CSS-COLOR-3]</a> module: <div class="example" id="example-df188c81"> <a class="self-link" href="#example-df188c81"></a> <pre class="lang-css highlight">table.colortable td <c- p>{</c-> <c- k>text-align</c-><c- p>:</c->center<c- p>;</c-> <c- p>}</c-> table.colortable td.c <c- p>{</c-> <c- k>text-transform</c-><c- p>:</c->uppercase<c- p>;</c-> <c- p>}</c-> table.colortable td:first-child<c- p>,</c-> table.colortable td:first-child+td <c- p>{</c-> <c- k>border</c-><c- p>:</c-><c- m>1</c-><c- k>px</c-> solid black<c- p>;</c-> <c- p>}</c-> table.colortable th <c- p>{</c-> <c- k>text-align</c-><c- p>:</c->center<c- p>;</c-> <c- k>background</c-><c- p>:</c->black<c- p>;</c-> <c- k>color</c-><c- p>:</c->white<c- p>;</c-> <c- p>}</c-> </pre> </div> Nesting allows the grouping of related style rules, like this: <div class="example" id="example-aecb8796"> <a class="self-link" href="#example-aecb8796"></a> <pre class="lang-css highlight">table.colortable <c- p>{</c-> & td <c- p>{</c-> <c- k>text-align</c-><c- p>:</c->center<c- p>;</c-> &.c <c- p>{</c-> <c- k>text-transform</c-><c- p>:</c->uppercase <c- p>}</c-> &:first-child<c- p>,</c-> &:first-child + td <c- p>{</c-> <c- k>border</c-><c- p>:</c-><c- m>1</c-><c- k>px</c-> solid black <c- p>}</c-> <c- p>}</c-> & th <c- p>{</c-> <c- k>text-align</c-><c- p>:</c->center<c- p>;</c-> <c- k>background</c-><c- p>:</c->black<c- p>;</c-> <c- k>color</c-><c- p>:</c->white<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> Besides removing duplication, the grouping of related rules improves the readability and maintainability of the resulting CSS. <h2 class="heading settled" data-level="2" id="nesting">2. Nesting Style Rules<a class="self-link" href="#nesting"></a></h2> Style rules can be nested inside of other styles rules. These <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="nested style rule|nesting style rule" id="nested-style-rule">nested style rules</dfn> act exactly like ordinary style rules—associating properties with elements via selectors—but they "inherit" their parent rule’s selector context, allowing them to further build on the parent’s selector without having to repeat it, possibly multiple times. A <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule">nested style rule</a> is exactly like a normal style rule, with the exception that its <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#selector" id="ref-for-selector">selector</a> cannot start with an <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-css-identifier" id="ref-for-css-css-identifier">identifier</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation">functional notation</a>. Additionally, nested style rules can use <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#relative-selector" id="ref-for-relative-selector">relative selectors</a>. <div class="example" id="example-20186287"> <a class="self-link" href="#example-20186287"></a> That is, a nested style rule like: <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> .bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> is valid, and equivalent to: <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> .foo .bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> </pre> The nested rule can also use the <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector">nesting selector</a> to directly refer to the parent rule’s matched elements, or use <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#relative-selector" id="ref-for-relative-selector①">relative selector</a> syntax to specify relationships other than "descendant". <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> &:hover <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to: */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> .foo:hover <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> </pre> <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> + .bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to: */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> .foo + .bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> </pre> </div> <div class="example" id="example-34e8e94f"> <a class="self-link" href="#example-34e8e94f"></a> However, starting the nested selector with an identifier (a <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#type-selector" id="ref-for-type-selector">type selector</a>, in other words) is invalid: <pre class="lang-css highlight">div <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> input <c- p>{</c-> <c- k>margin</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* Invalid, because "input" is an identifier. */</c-> </pre> Such selectors can still be written, they just need to be slightly rephrased: <pre class="lang-css highlight">div <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> & input <c- p>{</c-> <c- k>margin</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> <c- c>/* valid, no longer starts with an identifier */</c-> <c- nf>:is</c-><c- p>(</c->input<c- p>)</c-> <c- p>{</c-> <c- k>margin</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> <c- c>/* valid, starts with a colon,</c-> <c- c> and equivalent to the previous rule. */</c-> <c- p>}</c-> </pre> </div> <details class="note"> <summary>Why are there restrictions on nested rule selectors?</summary> Nesting style rules naively inside of other style rules is, unfortunately, ambiguous—the syntax of a selector overlaps with the syntax of a declaration, so an implementation requires unbounded lookahead to tell whether a given bit of text is a declaration or the start of a style rule. For example, if a parser starts by seeing color:hover ..., it can’t tell whether that’s the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> property (being set to an invalid value...) or a selector for a <code><color></code> element. It can’t even rely on looking for valid properties to tell the difference; this would cause parsing to depend on which properties the implementation supported, and could change over time. Forbidding nested style rules from starting with an <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-css-identifier" id="ref-for-css-css-identifier①">identifier</a> works around this problem—all <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations">declarations</a> start with an identifier giving the property name, so the parser can immediately tell whether it’s parsing a <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#declaration" id="ref-for-declaration">declaration</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#style-rule" id="ref-for-style-rule">style rule</a>. Some non-browser implementations of nested rules do not impose this requirement. It is, in most cases, eventually possible to tell properties and selectors apart, but doing so requires unbounded lookahead in the parser; that is, the parser might have to hold onto an unknown amount of content before it can tell which way it’s supposed to be interpreting it. CSS to date requires only a small, known amount of lookahead in its parsing, which allows for more efficient parsing algorithms, so unbounded lookahead is generally considered unacceptable among browser implementations of CSS. </details> <h3 class="heading settled" data-level="2.1" id="syntax">2.1. Syntax<a class="self-link" href="#syntax"></a></h3> The contents of <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#style-rule" id="ref-for-style-rule①">style rules</a> now accepts <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule②">nested style rules</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#at-rule" id="ref-for-at-rule">at-rules</a>, in addition to the existing <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations①">declarations</a>. <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule③">Nested style rules</a> differ from non-nested rules in the following ways: <ul> <li data-md> The selector of <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule④">nested style rules</a> must not start with an <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-css-identifier" id="ref-for-css-css-identifier②">identifier</a> or a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation①">functional notation</a>. <li data-md> A <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule⑤">nested style rule</a> accepts a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/selectors-4/#typedef-relative-selector-list" id="ref-for-typedef-relative-selector-list"><relative-selector-list></a> as its prelude (rather than just a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/selectors-4/#typedef-selector-list" id="ref-for-typedef-selector-list"><selector-list></a>). Any <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#relative-selector" id="ref-for-relative-selector②">relative selectors</a> are relative to the elements represented by the <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector①">nesting selector</a>. <li data-md> If a selector in the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/selectors-4/#typedef-relative-selector-list" id="ref-for-typedef-relative-selector-list①"><relative-selector-list></a> does not start with a <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#selector-combinator" id="ref-for-selector-combinator">combinator</a> but does contain the <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector②">nesting selector</a>, it is interpreted as a non-<a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#relative-selector" id="ref-for-relative-selector③">relative selector</a>. </ul> The precise details of how nested style rules are parsed are defined in <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. <a class="self-link" href="#issue-8ec431e9"></a> The CSSWG is currently exploring the consequences of parsing lookahead, and may adjust the allowed syntax as a result. <a href="https://github.com/w3c/csswg-drafts/issues/7961">[Issue #7961]</a> An invalid <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule⑥">nested style rule</a> is ignored, along with its contents, but does not invalidate its parent rule. <div class="example" id="example-31845edf"> <a class="self-link" href="#example-31845edf"></a> For example, the following nestings are valid: <pre class="lang-css highlight"><c- c>/* & can be used on its own */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> & > .bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> > .baz <c- p>{</c-> <c- k>color</c-><c- p>:</c-> green<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: blue; }</c-> <c- c> .foo > .bar { color: red; }</c-> <c- c> .foo > .baz { color: green; }</c-> <c- c>*/</c-> <c- c>/* or in a compound selector,</c-> <c- c> refining the parent’s selector */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> &.bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: blue; }</c-> <c- c> .foo.bar { color: red; }</c-> <c- c>*/</c-> <c- c>/* multiple selectors in the list are all</c-> <c- c> relative to the parent */</c-> .foo<c- p>,</c-> .bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> + .baz<c- p>,</c-> &.qux <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo, .bar { color: blue; }</c-> <c- c> :is(.foo, .bar) + .baz,</c-> <c- c> :is(.foo, .bar).qux { color: red; }</c-> <c- c>*/</c-> <c- c>/* & can be used multiple times in a single selector */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> & .bar & .baz & .qux <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: blue; }</c-> <c- c> .foo .bar .foo .baz .foo .qux { color: red; }</c-> <c- c>*/</c-> <c- c>/* & doesn’t have to be at the beginning of the selector */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> .parent & <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: red; }</c-> <c- c> .parent .foo { color: blue; }</c-> <c- c>*/</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- nf>:not</c-><c- p>(</c->&<c- p>)</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: red; }</c-> <c- c> :not(.foo) { color: blue; }</c-> <c- c>*/</c-> <c- c>/* But if you use a </c-><a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#relative-selector" id="ref-for-relative-selector④"><c- c>relative selector</c-></a><c- c>,</c-> <c- c> an initial & is implied automatically */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> + .bar + & <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: red; }</c-> <c- c> .foo + .bar + .foo { color: blue; }</c-> <c- c>*/</c-> <c- c>/* Somewhat silly, but & can be used all on its own, as well. */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> & <c- p>{</c-> <c- k>padding</c-><c- p>:</c-> <c- m>2</c-><c- k>ch</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: blue; }</c-> <c- c> .foo { padding: 2ch; }</c-> <c- c> // or</c-> <c- c> .foo {</c-> <c- c> color: blue;</c-> <c- c> padding: 2ch;</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* Again, silly, but can even be doubled up. */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> && <c- p>{</c-> <c- k>padding</c-><c- p>:</c-> <c- m>2</c-><c- k>ch</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { color: blue; }</c-> <c- c> .foo.foo { padding: 2ch; }</c-> <c- c>*/</c-> <c- c>/* The parent selector can be arbitrarily complicated */</c-> .error<c- p>,</c-> #404 <c- p>{</c-> &:hover > .baz <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> :is(.error, #404):hover > .baz { color: red; }</c-> <c- c>*/</c-> .ancestor .el <c- p>{</c-> .other-ancestor & <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .other-ancestor :is(.ancestor .el) { color: red; }</c-> <c- c>/* As can the nested selector */</c-> .foo <c- p>{</c-> & <c- nf>:is</c-><c- p>(</c->.bar<c- p>,</c-> &.baz<c- p>)</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo :is(.bar, .foo.baz) { color: red; }</c-> <c- c>*/</c-> <c- c>/* Multiple levels of nesting "stack up" the selectors */</c-> figure <c- p>{</c-> <c- k>margin</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> > figcaption <c- p>{</c-> <c- k>background</c-><c- p>:</c-> <c- nf>hsl</c-><c- p>(</c-><c- m>0</c-> <c- m>0</c-><c- k>%</c-> <c- m>0</c-><c- k>%</c-> / <c- m>50</c-><c- k>%</c-><c- p>);</c-> > p <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>.9</c-><c- k>rem</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> figure { margin: 0; }</c-> <c- c> figure > figcaption { background: hsl(0 0% 0% / 50%); }</c-> <c- c> figure > figcaption > p { font-size: .9rem; }</c-> <c- c>*/</c-> <c- c>/* Example usage with Cascade Layers */</c-> <c- n>@layer</c-> base <c- p>{</c-> html <c- p>{</c-> <c- k>block-size</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> & body <c- p>{</c-> <c- k>min-block-size</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> @layer base {</c-> <c- c> html { block-size: 100%; }</c-> <c- c> html body { min-block-size: 100%; }</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* Example nesting Cascade Layers */</c-> <c- n>@layer</c-> base <c- p>{</c-> html <c- p>{</c-> <c- k>block-size</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> <c- n>@layer</c-> support <c- p>{</c-> & body <c- p>{</c-> <c- k>min-block-size</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> @layer base {</c-> <c- c> html { block-size: 100%; }</c-> <c- c> }</c-> <c- c> @layer base.support {</c-> <c- c> html body { min-block-size: 100%; }</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* Example usage with Scoping */</c-> <c- n>@scope</c-> <c- p>(</c->.card<c- p>)</c-> to <c- p>(</c->> header<c- p>)</c-> <c- p>{</c-> :scope <c- p>{</c-> <c- k>inline-size</c-><c- p>:</c-> <c- m>40</c-><c- k>ch</c-><c- p>;</c-> <c- k>aspect-ratio</c-><c- p>:</c-> <c- m>3</c->/<c- m>4</c-><c- p>;</c-> > header <c- p>{</c-> <c- k>border-block-end</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid white<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> @scope (.card) to (> header) {</c-> <c- c> :scope { inline-size: 40ch; aspect-ratio: 3/4; }</c-> <c- c> :scope > header { border-block-end: 1px solid white; }</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* Example nesting Scoping */</c-> .card <c- p>{</c-> <c- k>inline-size</c-><c- p>:</c-> <c- m>40</c-><c- k>ch</c-><c- p>;</c-> <c- k>aspect-ratio</c-><c- p>:</c-> <c- m>3</c->/<c- m>4</c-><c- p>;</c-> <c- n>@scope</c-> <c- p>(</c->&<c- p>)</c-> to <c- p>(</c->> header > *<c- p>)</c-> <c- p>{</c-> :scope > header <c- p>{</c-> <c- k>border-block-end</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid white<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .card { inline-size: 40ch; aspect-ratio: 3/4; }</c-> <c- c> @scope (.card) to (> header > *) {</c-> <c- c> :scope > header { border-block-end: 1px solid white; }</c-> <c- c> }</c-> <c- c>*/</c-> </pre> But these are not valid: <pre class="lang-css highlight"><c- c>/* Selector starts with an identifier */</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> div <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> <div class="note" role="note"> Some CSS-generating tools that preprocess nesting will concatenate selectors as strings, allowing authors to build up a single <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#simple" id="ref-for-simple">simple selector</a> across nesting levels. This is sometimes used with hierarchical name patterns like <a href="https://en.wikipedia.org/wiki/CSS#:~:text=bem%20(block%2C%20element%2C%20modifier)">BEM</a> to reduce repetition across a file, when the selectors themselves have significant repetition internally. For example, if one component uses the class .foo, and a nested component uses .fooBar, you could write this in <a href="https://sass-lang.com/">Sass</a> as: <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> &Bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* In Sass, this is equivalent to</c-> <c- c> .foo { color: blue; }</c-> <c- c> .fooBar { color: red; }</c-> <c- c>*/</c-> </pre> Unfortunately, this string-based interpretation is ambiguous with the author attempting to add a type selector in the nested rule. <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-ui-4/#valdef-caret-shape-bar" id="ref-for-valdef-caret-shape-bar">Bar</a>, for example, is a valid <a href="https://html.spec.whatwg.org/multipage/custom-elements.html">custom element name</a> in HTML. CSS doesn’t do this: the nested selector components are interpreted atomically, and not string-concatenated: <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> &Bar <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* In CSS, this is instead equivalent to</c-> <c- c> .foo { color: blue; }</c-> <c- c> Bar.foo { color: red; }</c-> <c- c>*/</c-> </pre> </div> <h3 class="heading settled" data-level="2.2" id="conditionals">2.2. Nesting Other At-Rules<a class="self-link" href="#conditionals"></a></h3> In addition to <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule⑦">nested style rules</a>, this specification allows <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="nested-group-rules">nested group rules</dfn> inside of <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#style-rule" id="ref-for-style-rule②">style rules</a>: any at-rule whose body contains style rules can be nested inside of a style rule as well. When nested in this way, the contents of a <a data-link-type="dfn" href="#nested-group-rules" id="ref-for-nested-group-rules">nested group rule</a> are parsed as <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-style-block" id="ref-for-typedef-style-block"><style-block></a> rather than <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-stylesheet" id="ref-for-typedef-stylesheet"><stylesheet></a>: <ul> <li data-md> <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#style-rule" id="ref-for-style-rule⑤">Style rules</a> are <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule⑧">nested style rules</a>, with their <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector③">nesting selector</a> taking its definition from the nearest ancestor style rule. <li data-md> Properties can be directly used, acting as if they were nested in a <code>& {...}</code> block. </ul> <div class="note" role="note"> Specifically, these rules are capable of being <a data-link-type="dfn" href="#nested-group-rules" id="ref-for-nested-group-rules①">nested group rules</a>: <ul> <li data-md> all the <a data-link-type="dfn" href="https://www.w3.org/TR/css-conditional-3/#conditional-group-rule" id="ref-for-conditional-group-rule">conditional group rules</a> (<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media">@media</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports">@supports</a>) <li data-md> <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-5/#at-ruledef-layer" id="ref-for-at-ruledef-layer">@layer</a> <li data-md> <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-6/#at-ruledef-scope" id="ref-for-at-ruledef-scope">@scope</a> <li data-md> <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-contain-3/#at-ruledef-container" id="ref-for-at-ruledef-container">@container</a> </ul> </div> The meanings and behavior of such <a data-link-type="dfn" href="#nested-group-rules" id="ref-for-nested-group-rules②">nested group rules</a> is otherwise unchanged, unless otherwise specified. <div class="example" id="example-f2b8b339"> <a class="self-link" href="#example-f2b8b339"></a> For example, the following conditional nestings are valid: <pre class="lang-css highlight"><c- c>/* Properties can be directly used */</c-> .foo <c- p>{</c-> <c- k>display</c-><c- p>:</c-> grid<c- p>;</c-> <c- n>@media</c-> <c- p>(</c->orientation: landscape<c- p>)</c-> <c- p>{</c-> <c- k>grid-auto-flow</c-><c- p>:</c-> column<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo {</c-> <c- c> display: grid;</c-> <c- c> </c-> <c- c> @media (orientation: landscape) {</c-> <c- c> & {</c-> <c- c> grid-auto-flow: column;</c-> <c- c> }</c-> <c- c> }</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* finally equivalent to</c-> <c- c> .foo { display: grid; }</c-> <c- c> @media (orientation: landscape) {</c-> <c- c> .foo {</c-> <c- c> grid-auto-flow: column;</c-> <c- c> }</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* Conditionals can be further nested */</c-> .foo <c- p>{</c-> <c- k>display</c-><c- p>:</c-> grid<c- p>;</c-> <c- n>@media</c-> <c- p>(</c->orientation: landscape<c- p>)</c-> <c- p>{</c-> <c- k>grid-auto-flow</c-><c- p>:</c-> column<c- p>;</c-> <c- n>@media</c-> <c- p>(</c->min-width > <c- m>1024</c-><c- k>px</c-><c- p>)</c-> <c- p>{</c-> <c- k>max-inline-size</c-><c- p>:</c-> <c- m>1024</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo { display: grid; }</c-> <c- c> @media (orientation: landscape) {</c-> <c- c> .foo {</c-> <c- c> grid-auto-flow: column;</c-> <c- c> }</c-> <c- c> }</c-> <c- c> @media (orientation: landscape) and (min-width > 1024px) {</c-> <c- c> .foo {</c-> <c- c> max-inline-size: 1024px;</c-> <c- c> }</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* Example nesting Cascade Layers */</c-> html <c- p>{</c-> <c- n>@layer</c-> base <c- p>{</c-> <c- k>block-size</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> <c- n>@layer</c-> support <c- p>{</c-> & body <c- p>{</c-> <c- k>min-block-size</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> @layer base {</c-> <c- c> html { block-size: 100%; }</c-> <c- c> }</c-> <c- c> @layer base.support {</c-> <c- c> html body { min-block-size: 100%; }</c-> <c- c> }</c-> <c- c>*/</c-> <c- c>/* Example nesting Scoping */</c-> .card <c- p>{</c-> <c- k>inline-size</c-><c- p>:</c-> <c- m>40</c-><c- k>ch</c-><c- p>;</c-> <c- k>aspect-ratio</c-><c- p>:</c-> <c- m>3</c->/<c- m>4</c-><c- p>;</c-> <c- n>@scope</c-> <c- p>(</c->&<c- p>)</c-> <c- p>{</c-> :scope <c- p>{</c-> <c- k>border</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid white<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .card { inline-size: 40ch; aspect-ratio: 3/4; }</c-> <c- c> @scope (.card) {</c-> <c- c> :scope { border-block-end: 1px solid white; }</c-> <c- c> }</c-> <c- c>*/</c-> </pre> </div> All directly-nested properties are treated as if they were collected together, in order, and nested in a <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule⑨">nested style rule</a> with the selector <a class="css" data-link-type="maybe" href="#selectordef-" id="ref-for-selectordef-">&</a>, and placed before all other child rules. This includes in the OM. (That is, the <code class="idl"><a data-link-type="idl">childRules</a></code> attribute actually starts with this nested style rule, containing all the directly-nested properties.) <div class="example" id="example-6f271ab7"> <a class="self-link" href="#example-6f271ab7"></a> For example, the earlier example: <pre class="highlight">.foo <c- p>{</c-> <c- k>display</c-><c- p>:</c-> grid<c- p>;</c-> <c- n>@media</c-> <c- p>(</c->orientation: landscape<c- p>)</c-> <c- p>{</c-> <c- k>grid-auto-flow</c-><c- p>:</c-> column<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* equivalent to</c-> <c- c> .foo {</c-> <c- c> display: grid;</c-> <c- c> @media (orientation: landscape) {</c-> <c- c> & {</c-> <c- c> grid-auto-flow: column;</c-> <c- c> }</c-> <c- c> }</c-> <c- c> }</c-> <c- c>*/</c-> </pre> is in fact exactly equivalent, producing the exact same CSSOM structure. The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/css-conditional-3/#cssmediarule" id="ref-for-cssmediarule">CSSMediaRule</a></code> object will have a single <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#cssstylerule" id="ref-for-cssstylerule">CSSStyleRule</a></code> object in its <code class="highlight"><c- p>.</c->childRules</code> attribute, containing the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-grid-2/#propdef-grid-auto-flow" id="ref-for-propdef-grid-auto-flow">grid-auto-flow</a> property. </div> Note: This does mean that the serialization of such rules will differ from how they were originally written, with no directly-nested properties in the serialization. <h4 class="heading settled" data-level="2.2.1" id="nesting-at-scope">2.2.1. Nested <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-6/#at-ruledef-scope" id="ref-for-at-ruledef-scope①">@scope</a> Rules<a class="self-link" href="#nesting-at-scope"></a></h4> When the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-6/#at-ruledef-scope" id="ref-for-at-ruledef-scope②">@scope</a> rule is a <a data-link-type="dfn" href="#nested-group-rules" id="ref-for-nested-group-rules③">nested group rule</a>, an <a class="css" data-link-type="maybe" href="#selectordef-" id="ref-for-selectordef-①">&</a> in the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-cascade-6/#typedef-scope-start" id="ref-for-typedef-scope-start"><scope-start></a> selector refers to the elements matched by the nearest ancestor style rule. For the purposes of the style rules in its body and its own <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-cascade-6/#typedef-scope-end" id="ref-for-typedef-scope-end"><scope-end></a> selector, the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-6/#at-ruledef-scope" id="ref-for-at-ruledef-scope③">@scope</a> rule is treated as an ancestor style rule, matching the elements matched by its <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-cascade-6/#typedef-scope-start" id="ref-for-typedef-scope-start①"><scope-start></a> selector. <div class="example" id="example-792b81d1"> <a class="self-link" href="#example-792b81d1"></a> That is, the following code: <pre class="highlight">.parent <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- n>@scope</c-> <c- p>(</c->& > .scope<c- p>)</c-> to <c- p>(</c->& .limit<c- p>)</c-> <c- p>{</c-> & .content <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> </pre> is equivalent to: <pre class="highlight">.parent <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- n>@scope</c-> <c- p>(</c->.parent > .scope<c- p>)</c-> to <c- p>(</c->.parent > .scope .limit<c- p>)</c-> <c- p>{</c-> .parent > .scope .content <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> <h3 class="heading settled" data-level="2.3" id="mixing">2.3. Mixing Nesting Rules and Declarations<a class="self-link" href="#mixing"></a></h3> When a style rule contains both declarations and <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule①①">nested style rules</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-nesting-1/#nested-conditional-group-rules" id="ref-for-nested-conditional-group-rules">nested conditional group rules</a>, all three can be arbitrarily mixed. However, the relative order of declarations vs other rules is not preserved in any way. <div class="example" id="example-ee2b228d"> <a class="self-link" href="#example-ee2b228d"></a> For example, in the following code: <pre class="lang-css highlight">article <c- p>{</c-> <c- k>color</c-><c- p>:</c-> green<c- p>;</c-> & <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> color: red<c- p>;</c-> <c- p>}</c-> <c- c>/* equivalent to */</c-> article <c- p>{</c-> <c- k>color</c-><c- p>:</c-> green<c- p>;</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> & <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> For the purpose of determining the <a href="https://www.w3.org/TR/css-cascade-4/#cascade-sort">Order Of Appearance</a>, <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule①②">nested style rules</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-nesting-1/#nested-conditional-group-rules" id="ref-for-nested-conditional-group-rules①">nested conditional group rules</a> are considered to come after their parent rule. <div> For example: <pre class="lang-css highlight">article <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> & <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> Both declarations have the same specificity (0,0,1), but the nested rule is considered to come after its parent rule, so the <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color①">color: red</a> declarations wins the cascade. On the other hand, in this example: <pre class="lang-css highlight">article <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- nf>:where</c-><c- p>(</c->&<c- p>)</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#where-pseudo" id="ref-for-where-pseudo">:where()</a> pseudoclass reduces the specificity of the <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector④">nesting selector</a> to 0, so the <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color②">color: red</a> declaration now has a specificity of (0,0,0), and loses to the color: blue declaration before "Order Of Appearance" comes into consideration. </div> Note: While one can freely intermix declarations and nested rules, it’s harder to read and somewhat confusing to do so, since all the properties act as if they came before all the rules. For readability’s sake, it’s recommended that authors put all their properties first in a style rule, before any nested rules. (This also happens to act slightly better in older user agents; due to specifics of how parsing and error-recovery work, properties appearing after nested rules can get skipped.) Note: Like with other types of rules, the serialization of style rules in the presence of nesting can vary from how they were originally written. Notably, all directly-nested properties will be serialized before any nested rules, which is another reason to write properties before rules. <h2 class="heading settled" data-level="3" id="nest-selector">3. Nesting Selector: the <a class="css" data-link-type="maybe" href="#selectordef-" id="ref-for-selectordef-②">&</a> selector<a class="self-link" href="#nest-selector"></a></h2> When using a <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule①③">nested style rule</a>, one must be able to refer to the elements matched by the parent rule; that is, after all, the entire point of nesting. To accomplish that, this specification defines a new selector, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="nesting-selector">nesting selector</dfn>, written as <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-">&</dfn> (U+0026 AMPERSAND). When used in the selector of a <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule①④">nested style rule</a>, the <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector⑤">nesting selector</a> represents the elements matched by the parent rule. When used in any other context, it represents the same elements as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#scope-pseudo" id="ref-for-scope-pseudo">:scope</a> in that context (unless otherwise defined). <div class="note" role="note"> The <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector⑥">nesting selector</a> can be desugared by replacing it with the parent style rule’s selector, wrapped in an <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo">:is()</a> selector. For example, <pre class="lang-css highlight">a<c- p>,</c-> b <c- p>{</c-> & c <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> is equivalent to <pre class="lang-css highlight"><c- nf>:is</c-><c- p>(</c->a<c- p>,</c-> b<c- p>)</c-> c <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> </pre> </div> The <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector⑦">nesting selector</a> cannot represent pseudo-elements (identical to the behavior of the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo①">:is()</a> pseudo-class). <div class="example" id="example-7145ff1e"> <a class="self-link" href="#example-7145ff1e"></a> For example, in the following style rule: <pre class="lang-css highlight">.foo<c- p>,</c-> .foo::before<c- p>,</c-> .foo::after <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> &:hover <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> the <a class="css" data-link-type="maybe" href="#selectordef-" id="ref-for-selectordef-③">&</a> only represents the elements matched by .foo; in other words, it’s equivalent to: <pre class="lang-css highlight">.foo<c- p>,</c-> .foo::before<c- p>,</c-> .foo::after <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> .foo:hover <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> </pre> </div> <a class="self-link" href="#issue-62c479a8"></a> We’d like to relax this restriction, but need to do so simultaneously for both <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo②">:is()</a> and <a class="css" data-link-type="maybe" href="#selectordef-" id="ref-for-selectordef-④">&</a>, since they’re intentionally built on the same underlying mechanisms. (<a href="https://github.com/w3c/csswg-drafts/issues/7433">Issue 7433</a>) The <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#specificity" id="ref-for-specificity">specificity</a> of the <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector⑧">nesting selector</a> is equal to the largest specificity among the complex selectors in the parent style rule’s selector list (identical to the behavior of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo③">:is()</a>). <div class="example" id="example-a71fa710"> <a class="self-link" href="#example-a71fa710"></a> For example, given the following style rules: <pre class="lang-css highlight">#a<c- p>,</c-> b <c- p>{</c-> & c <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> .foo c <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> </pre> Then in a DOM structure like <pre class="lang-html highlight"><c- p><</c-><c- f>b</c-> <c- e>class</c-><c- o>=</c-><c- s>foo</c-><c- p>></c-> <c- p><</c-><c- f>c</c-><c- p>></c->Blue text<c- p></</c-><c- f>c</c-><c- p>></c-> <c- p></</c-><c- f>b</c-><c- p>></c-> </pre> The text will be blue, rather than red. The specificity of the <a class="css" data-link-type="maybe" href="#selectordef-" id="ref-for-selectordef-⑤">&</a> is the larger of the specificities of #a ([1,0,0]) and b ([0,0,1]), so it’s [1,0,0], and the entire & c selector thus has specificity [1,0,1], which is larger than the specificity of .foo c ([0,1,1]). Notably, this is different than the result you’d get if the nesting were manually expanded out into non-nested rules, since the <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color④">color: blue</a> declaration would then be matching due to the b c selector ([0,0,2]) rather than #a c ([1,0,1]). </div> <details class="note"> <summary>Why is the specificity different than non-nested rules?</summary> The <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector⑨">nesting selector</a> intentionally uses the same specificity rules as the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo④">:is()</a> pseudoclass, which just uses the largest specificity among its arguments, rather than tracking which selector actually matched. This is required for performance reasons; if a selector has multiple possible specificities, depending on how precisely it was matched, it makes selector matching much more complicated and slower. That skirts the question, tho: why do we define <a class="css" data-link-type="maybe" href="#selectordef-" id="ref-for-selectordef-⑥">&</a> in terms of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo⑤">:is()</a>? Some non-browser implementations of Nesting-like functionality do not desugar to :is(), largely because they predate the introduction of :is() as well. Instead, they desugar directly; however, this comes with its own significant problems, as some (reasonably common) cases can accidentally produce massive selectors, due to the exponential explosion of possibilities. <pre class="lang-css highlight">.a1<c- p>,</c-> .a2<c- p>,</c-> .a3 <c- p>{</c-> .b1<c- p>,</c-> .b3<c- p>,</c-> .b3 <c- p>{</c-> .c1<c- p>,</c-> .c2<c- p>,</c-> .c3 <c- p>{</c-> ...<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* naively desugars to */</c-> .a1 .b1 .c1<c- p>,</c-> .a1 .b1 .c2<c- p>,</c-> .a1 .b1 .c3<c- p>,</c-> .a1 .b2 .c1<c- p>,</c-> .a1 .b2 .c2<c- p>,</c-> .a1 .b2 .c3<c- p>,</c-> .a1 .b3 .c1<c- p>,</c-> .a1 .b3 .c2<c- p>,</c-> .a1 .b3 .c3<c- p>,</c-> .a2 .b1 .c1<c- p>,</c-> .a2 .b1 .c2<c- p>,</c-> .a2 .b1 .c3<c- p>,</c-> .a2 .b2 .c1<c- p>,</c-> .a2 .b2 .c2<c- p>,</c-> .a2 .b2 .c3<c- p>,</c-> .a2 .b3 .c1<c- p>,</c-> .a2 .b3 .c2<c- p>,</c-> .a2 .b3 .c3<c- p>,</c-> .a3 .b1 .c1<c- p>,</c-> .a3 .b1 .c2<c- p>,</c-> .a3 .b1 .c3<c- p>,</c-> .a3 .b2 .c1<c- p>,</c-> .a3 .b2 .c2<c- p>,</c-> .a3 .b2 .c3<c- p>,</c-> .a3 .b3 .c1<c- p>,</c-> .a3 .b3 .c2<c- p>,</c-> .a3 .b3 .c3 <c- p>{</c->...<c- p>}</c-> </pre> Here, three levels of nesting, each with three selectors in their lists, produced 27 desugared selectors. Adding more selectors to the lists, adding more levels of nesting, or making the nested rules more complex can make a relatively small rule expand into multiple megabytes of selectors (or much, much more!). Some CSS tools avoid the worst of this by heuristically discarding some variations, so they don’t have to output as much but are still probably correct, but that’s not an option available to UAs. Desugaring with <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo⑧">:is()</a> instead eliminates this problem entirely, at the cost of making specificity slightly less useful, which was judged a reasonable trade-off. </details> The <a data-link-type="dfn" href="#nesting-selector" id="ref-for-nesting-selector①⓪">nesting selector</a> is allowed anywhere in a <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#compound" id="ref-for-compound">compound selector</a>, even before a <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#type-selector" id="ref-for-type-selector①">type selector</a>, violating the normal restrictions on ordering within a compound selector. <div class="example" id="example-3d40c7b0"> <a class="self-link" href="#example-3d40c7b0"></a> For example, &div is a valid nesting selector, meaning "whatever the parent rules matches, but only if it’s also a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element" id="ref-for-the-div-element">div</a></code> element". It could also be written as div& with the same meaning, but that wouldn’t be valid to start a <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule①⑤">nested style rule</a> (but it could be used somewhere other than the very start of the selector). </div> <h2 class="heading settled" data-level="4" id="cssom">4. CSSOM<a class="self-link" href="#cssom"></a></h2> <h3 class="heading settled" data-level="4.1" id="cssom-style">4.1. Modifications to <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#cssstylerule" id="ref-for-cssstylerule①">CSSStyleRule</a></code><a class="self-link" href="#cssom-style"></a></h3> CSS style rules gain the ability to have nested rules: <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://www.w3.org/TR/cssom-1/#cssstylerule" id="ref-for-cssstylerule②"><c- g>CSSStyleRule</c-></a> { [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/cssom-1/#cssrulelist" id="ref-for-cssrulelist"><c- n>CSSRuleList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSRuleList" href="#dom-cssstylerule-cssrules" id="ref-for-dom-cssstylerule-cssrules"><c- g>cssRules</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="method" href="#dom-cssstylerule-insertrule" id="ref-for-dom-cssstylerule-insertrule"><c- g>insertRule</c-></a>(<a data-link-type="idl-name" href="https://www.w3.org/TR/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSStyleRule/insertRule(rule, index), CSSStyleRule/insertRule(rule)" data-dfn-type="argument" data-export id="dom-cssstylerule-insertrule-rule-index-rule"><code><c- g>rule</c-></code><a class="self-link" href="#dom-cssstylerule-insertrule-rule-index-rule"></a></dfn>, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="CSSStyleRule/insertRule(rule, index), CSSStyleRule/insertRule(rule)" data-dfn-type="argument" data-export id="dom-cssstylerule-insertrule-rule-index-index"><code><c- g>index</c-></code><a class="self-link" href="#dom-cssstylerule-insertrule-rule-index-index"></a></dfn> = 0); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-cssstylerule-deleterule" id="ref-for-dom-cssstylerule-deleterule"><c- g>deleteRule</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="CSSStyleRule/deleteRule(index)" data-dfn-type="argument" data-export id="dom-cssstylerule-deleterule-index-index"><code><c- g>index</c-></code><a class="self-link" href="#dom-cssstylerule-deleterule-index-index"></a></dfn>); }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="CSSStyleRule" data-dfn-type="attribute" data-export id="dom-cssstylerule-cssrules"><code>cssRules</code></dfn> attribute must return a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#cssrulelist" id="ref-for-cssrulelist①">CSSRuleList</a></code> object for the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-rule-child-css-rules" id="ref-for-concept-css-rule-child-css-rules">child CSS rules</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="CSSStyleRule" data-dfn-type="method" data-export data-lt="insertRule(rule, index)|insertRule(rule)" id="dom-cssstylerule-insertrule"><code>insertRule(<var>rule</var>, <var>index</var>)</code></dfn> method must return the result of invoking <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#insert-a-css-rule" id="ref-for-insert-a-css-rule">insert a CSS rule</a> <var>rule</var> into the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-rule-child-css-rules" id="ref-for-concept-css-rule-child-css-rules①">child CSS rules</a> at <var>index</var>. The <dfn class="dfn-paneled idl-code" data-dfn-for="CSSStyleRule" data-dfn-type="method" data-export id="dom-cssstylerule-deleterule"><code>deleteRule(<var>index</var>)</code></dfn> method must <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#remove-a-css-rule" id="ref-for-remove-a-css-rule">remove a CSS rule</a> from the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-rule-child-css-rules" id="ref-for-concept-css-rule-child-css-rules②">child CSS rules</a> at <var>index</var>. Note: Serialization of <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#cssstylerule" id="ref-for-cssstylerule③">CSSStyleRule</a></code> with nested rules are already well-defined by <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a>, via <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#serialize-a-css-rule" id="ref-for-serialize-a-css-rule">serialize a CSS rule</a>. Note: The restriction on what a <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule①⑥">nested style rule’s</a> selector can start with counts as a "constraint imposed by CSS" in step 5 of <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#insert-a-css-rule" id="ref-for-insert-a-css-rule①">insert a CSS rule</a> (when invoked by anything that takes nested style rules, not just <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#cssstylerule" id="ref-for-cssstylerule④">CSSStyleRule</a></code> itself). When setting <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-cssstylerule-selectortext" id="ref-for-dom-cssstylerule-selectortext">selectorText</a></code>, if the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#cssstylerule" id="ref-for-cssstylerule⑤">CSSStyleRule</a></code> is a <a data-link-type="dfn" href="#nested-style-rule" id="ref-for-nested-style-rule①⑧">nested style rule</a>, and the returned group of selectors starts with a selector that starts with an ident or function token, do nothing and return. <a class="self-link" href="#issue-bc4d708a"></a> The above paragraph will be inlined into the CSSOM algo, rather than monkey-patched. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#selectordef-">&</a>, in § 3 <li><a href="#dom-cssstylerule-cssrules">cssRules</a>, in § 4.1 <li><a href="#dom-cssstylerule-deleterule">deleteRule(index)</a>, in § 4.1 <li><a href="#dom-cssstylerule-insertrule">insertRule(rule)</a>, in § 4.1 <li><a href="#dom-cssstylerule-insertrule">insertRule(rule, index)</a>, in § 4.1 <li><a href="#nested-group-rules">nested group rules</a>, in § 2.2 <li><a href="#nested-style-rule">nested style rule</a>, in § 2 <li><a href="#nesting-selector">nesting selector</a>, in § 3 <li><a href="#nested-style-rule">nesting style rule</a>, in § 2 </ul> <aside class="dfn-panel" data-for="term-for-at-ruledef-layer"> <a href="https://www.w3.org/TR/css-cascade-5/#at-ruledef-layer">https://www.w3.org/TR/css-cascade-5/#at-ruledef-layer</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-layer">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-scope-end"> <a href="https://www.w3.org/TR/css-cascade-6/#typedef-scope-end">https://www.w3.org/TR/css-cascade-6/#typedef-scope-end</a>Referenced in: <ul> <li><a href="#ref-for-typedef-scope-end">2.2.1. Nested @scope Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-scope-start"> <a href="https://www.w3.org/TR/css-cascade-6/#typedef-scope-start">https://www.w3.org/TR/css-cascade-6/#typedef-scope-start</a>Referenced in: <ul> <li><a href="#ref-for-typedef-scope-start">2.2.1. Nested @scope Rules</a> <a href="#ref-for-typedef-scope-start①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-scope"> <a href="https://www.w3.org/TR/css-cascade-6/#at-ruledef-scope">https://www.w3.org/TR/css-cascade-6/#at-ruledef-scope</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-scope">2.2. Nesting Other At-Rules</a> <li><a href="#ref-for-at-ruledef-scope①">2.2.1. Nested @scope Rules</a> <a href="#ref-for-at-ruledef-scope②">(2)</a> <a href="#ref-for-at-ruledef-scope③">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-color"> <a href="https://www.w3.org/TR/css-color-4/#propdef-color">https://www.w3.org/TR/css-color-4/#propdef-color</a>Referenced in: <ul> <li><a href="#ref-for-propdef-color">2. Nesting Style Rules</a> <li><a href="#ref-for-propdef-color①">2.3. Mixing Nesting Rules and Declarations</a> <a href="#ref-for-propdef-color②">(2)</a> <a href="#ref-for-propdef-color③">(3)</a> <li><a href="#ref-for-propdef-color④">3. Nesting Selector: the & selector</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-media"> <a href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-media">https://www.w3.org/TR/css-conditional-3/#at-ruledef-media</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-media">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-supports"> <a href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports">https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-supports">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cssmediarule"> <a href="https://www.w3.org/TR/css-conditional-3/#cssmediarule">https://www.w3.org/TR/css-conditional-3/#cssmediarule</a>Referenced in: <ul> <li><a href="#ref-for-cssmediarule">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-conditional-group-rule"> <a href="https://www.w3.org/TR/css-conditional-3/#conditional-group-rule">https://www.w3.org/TR/css-conditional-3/#conditional-group-rule</a>Referenced in: <ul> <li><a href="#ref-for-conditional-group-rule">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-container"> <a href="https://www.w3.org/TR/css-contain-3/#at-ruledef-container">https://www.w3.org/TR/css-contain-3/#at-ruledef-container</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-container">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-grid-auto-flow"> <a href="https://www.w3.org/TR/css-grid-2/#propdef-grid-auto-flow">https://www.w3.org/TR/css-grid-2/#propdef-grid-auto-flow</a>Referenced in: <ul> <li><a href="#ref-for-propdef-grid-auto-flow">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-nested-conditional-group-rules"> <a href="https://www.w3.org/TR/css-nesting-1/#nested-conditional-group-rules">https://www.w3.org/TR/css-nesting-1/#nested-conditional-group-rules</a>Referenced in: <ul> <li><a href="#ref-for-nested-conditional-group-rules">2.3. Mixing Nesting Rules and Declarations</a> <a href="#ref-for-nested-conditional-group-rules①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-style-block"> <a href="https://www.w3.org/TR/css-syntax-3/#typedef-style-block">https://www.w3.org/TR/css-syntax-3/#typedef-style-block</a>Referenced in: <ul> <li><a href="#ref-for-typedef-style-block">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-stylesheet"> <a href="https://www.w3.org/TR/css-syntax-3/#typedef-stylesheet">https://www.w3.org/TR/css-syntax-3/#typedef-stylesheet</a>Referenced in: <ul> <li><a href="#ref-for-typedef-stylesheet">2.2. Nesting Other At-Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-rule"> <a href="https://www.w3.org/TR/css-syntax-3/#at-rule">https://www.w3.org/TR/css-syntax-3/#at-rule</a>Referenced in: <ul> <li><a href="#ref-for-at-rule">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-declaration"> <a href="https://www.w3.org/TR/css-syntax-3/#declaration">https://www.w3.org/TR/css-syntax-3/#declaration</a>Referenced in: <ul> <li><a href="#ref-for-declaration">2. Nesting Style Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-style-rule"> <a href="https://www.w3.org/TR/css-syntax-3/#style-rule">https://www.w3.org/TR/css-syntax-3/#style-rule</a>Referenced in: <ul> <li><a href="#ref-for-style-rule">2. Nesting Style Rules</a> <li><a href="#ref-for-style-rule①">2.1. Syntax</a> <li><a href="#ref-for-style-rule②">2.2. Nesting Other At-Rules</a> <a href="#ref-for-style-rule③">(2)</a> <a href="#ref-for-style-rule④">(3)</a> <a href="#ref-for-style-rule⑤">(4)</a> <a href="#ref-for-style-rule⑥">(5)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-caret-shape-bar"> <a href="https://www.w3.org/TR/css-ui-4/#valdef-caret-shape-bar">https://www.w3.org/TR/css-ui-4/#valdef-caret-shape-bar</a>Referenced in: <ul> <li><a href="#ref-for-valdef-caret-shape-bar">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-functional-notation"> <a href="https://www.w3.org/TR/css-values-4/#functional-notation">https://www.w3.org/TR/css-values-4/#functional-notation</a>Referenced in: <ul> <li><a href="#ref-for-functional-notation">2. Nesting Style Rules</a> <li><a href="#ref-for-functional-notation①">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-css-css-identifier"> <a href="https://www.w3.org/TR/css-values-4/#css-css-identifier">https://www.w3.org/TR/css-values-4/#css-css-identifier</a>Referenced in: <ul> <li><a href="#ref-for-css-css-identifier">2. Nesting Style Rules</a> <a href="#ref-for-css-css-identifier①">(2)</a> <li><a href="#ref-for-css-css-identifier②">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cssomstring"> <a href="https://www.w3.org/TR/cssom-1/#cssomstring">https://www.w3.org/TR/cssom-1/#cssomstring</a>Referenced in: <ul> <li><a href="#ref-for-cssomstring">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cssrulelist"> <a href="https://www.w3.org/TR/cssom-1/#cssrulelist">https://www.w3.org/TR/cssom-1/#cssrulelist</a>Referenced in: <ul> <li><a href="#ref-for-cssrulelist">4.1. Modifications to CSSStyleRule</a> <a href="#ref-for-cssrulelist①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cssstylerule"> <a href="https://www.w3.org/TR/cssom-1/#cssstylerule">https://www.w3.org/TR/cssom-1/#cssstylerule</a>Referenced in: <ul> <li><a href="#ref-for-cssstylerule">2.2. Nesting Other At-Rules</a> <li><a href="#ref-for-cssstylerule①">4.1. Modifications to CSSStyleRule</a> <a href="#ref-for-cssstylerule②">(2)</a> <a href="#ref-for-cssstylerule③">(3)</a> <a href="#ref-for-cssstylerule④">(4)</a> <a href="#ref-for-cssstylerule⑤">(5)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-css-rule-child-css-rules"> <a href="https://www.w3.org/TR/cssom-1/#concept-css-rule-child-css-rules">https://www.w3.org/TR/cssom-1/#concept-css-rule-child-css-rules</a>Referenced in: <ul> <li><a href="#ref-for-concept-css-rule-child-css-rules">4.1. Modifications to CSSStyleRule</a> <a href="#ref-for-concept-css-rule-child-css-rules①">(2)</a> <a href="#ref-for-concept-css-rule-child-css-rules②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cssstyledeclaration-declarations"> <a href="https://www.w3.org/TR/cssom-1/#cssstyledeclaration-declarations">https://www.w3.org/TR/cssom-1/#cssstyledeclaration-declarations</a>Referenced in: <ul> <li><a href="#ref-for-cssstyledeclaration-declarations">2. Nesting Style Rules</a> <li><a href="#ref-for-cssstyledeclaration-declarations①">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-insert-a-css-rule"> <a href="https://www.w3.org/TR/cssom-1/#insert-a-css-rule">https://www.w3.org/TR/cssom-1/#insert-a-css-rule</a>Referenced in: <ul> <li><a href="#ref-for-insert-a-css-rule">4.1. Modifications to CSSStyleRule</a> <a href="#ref-for-insert-a-css-rule①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-remove-a-css-rule"> <a href="https://www.w3.org/TR/cssom-1/#remove-a-css-rule">https://www.w3.org/TR/cssom-1/#remove-a-css-rule</a>Referenced in: <ul> <li><a href="#ref-for-remove-a-css-rule">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-dom-cssstylerule-selectortext"> <a href="https://www.w3.org/TR/cssom-1/#dom-cssstylerule-selectortext">https://www.w3.org/TR/cssom-1/#dom-cssstylerule-selectortext</a>Referenced in: <ul> <li><a href="#ref-for-dom-cssstylerule-selectortext">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-serialize-a-css-rule"> <a href="https://www.w3.org/TR/cssom-1/#serialize-a-css-rule">https://www.w3.org/TR/cssom-1/#serialize-a-css-rule</a>Referenced in: <ul> <li><a href="#ref-for-serialize-a-css-rule">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-div-element"> <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element</a>Referenced in: <ul> <li><a href="#ref-for-the-div-element">3. Nesting Selector: the & selector</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-matches-pseudo"> <a href="https://www.w3.org/TR/selectors-4/#matches-pseudo">https://www.w3.org/TR/selectors-4/#matches-pseudo</a>Referenced in: <ul> <li><a href="#ref-for-matches-pseudo">3. Nesting Selector: the & selector</a> <a href="#ref-for-matches-pseudo①">(2)</a> <a href="#ref-for-matches-pseudo②">(3)</a> <a href="#ref-for-matches-pseudo③">(4)</a> <a href="#ref-for-matches-pseudo④">(5)</a> <a href="#ref-for-matches-pseudo⑤">(6)</a> <a href="#ref-for-matches-pseudo⑥">(7)</a> <a href="#ref-for-matches-pseudo⑦">(8)</a> <a href="#ref-for-matches-pseudo⑧">(9)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-scope-pseudo"> <a href="https://www.w3.org/TR/selectors-4/#scope-pseudo">https://www.w3.org/TR/selectors-4/#scope-pseudo</a>Referenced in: <ul> <li><a href="#ref-for-scope-pseudo">3. Nesting Selector: the & selector</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-where-pseudo"> <a href="https://www.w3.org/TR/selectors-4/#where-pseudo">https://www.w3.org/TR/selectors-4/#where-pseudo</a>Referenced in: <ul> <li><a href="#ref-for-where-pseudo">2.3. Mixing Nesting Rules and Declarations</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-relative-selector-list"> <a href="https://www.w3.org/TR/selectors-4/#typedef-relative-selector-list">https://www.w3.org/TR/selectors-4/#typedef-relative-selector-list</a>Referenced in: <ul> <li><a href="#ref-for-typedef-relative-selector-list">2.1. Syntax</a> <a href="#ref-for-typedef-relative-selector-list①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-selector-list"> <a href="https://www.w3.org/TR/selectors-4/#typedef-selector-list">https://www.w3.org/TR/selectors-4/#typedef-selector-list</a>Referenced in: <ul> <li><a href="#ref-for-typedef-selector-list">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selector-combinator"> <a href="https://www.w3.org/TR/selectors-4/#selector-combinator">https://www.w3.org/TR/selectors-4/#selector-combinator</a>Referenced in: <ul> <li><a href="#ref-for-selector-combinator">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-compound"> <a href="https://www.w3.org/TR/selectors-4/#compound">https://www.w3.org/TR/selectors-4/#compound</a>Referenced in: <ul> <li><a href="#ref-for-compound">3. Nesting Selector: the & selector</a> <a href="#ref-for-compound①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-relative-selector"> <a href="https://www.w3.org/TR/selectors-4/#relative-selector">https://www.w3.org/TR/selectors-4/#relative-selector</a>Referenced in: <ul> <li><a href="#ref-for-relative-selector">2. Nesting Style Rules</a> <a href="#ref-for-relative-selector①">(2)</a> <li><a href="#ref-for-relative-selector②">2.1. Syntax</a> <a href="#ref-for-relative-selector③">(2)</a> <a href="#ref-for-relative-selector④">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selector"> <a href="https://www.w3.org/TR/selectors-4/#selector">https://www.w3.org/TR/selectors-4/#selector</a>Referenced in: <ul> <li><a href="#ref-for-selector">2. Nesting Style Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-simple"> <a href="https://www.w3.org/TR/selectors-4/#simple">https://www.w3.org/TR/selectors-4/#simple</a>Referenced in: <ul> <li><a href="#ref-for-simple">2.1. Syntax</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-specificity"> <a href="https://www.w3.org/TR/selectors-4/#specificity">https://www.w3.org/TR/selectors-4/#specificity</a>Referenced in: <ul> <li><a href="#ref-for-specificity">3. Nesting Selector: the & selector</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-type-selector"> <a href="https://www.w3.org/TR/selectors-4/#type-selector">https://www.w3.org/TR/selectors-4/#type-selector</a>Referenced in: <ul> <li><a href="#ref-for-type-selector">2. Nesting Style Rules</a> <li><a href="#ref-for-type-selector①">3. Nesting Selector: the & selector</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-SameObject"> <a href="https://webidl.spec.whatwg.org/#SameObject">https://webidl.spec.whatwg.org/#SameObject</a>Referenced in: <ul> <li><a href="#ref-for-SameObject">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-idl-undefined"> <a href="https://webidl.spec.whatwg.org/#idl-undefined">https://webidl.spec.whatwg.org/#idl-undefined</a>Referenced in: <ul> <li><a href="#ref-for-idl-undefined">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-idl-unsigned-long"> <a href="https://webidl.spec.whatwg.org/#idl-unsigned-long">https://webidl.spec.whatwg.org/#idl-unsigned-long</a>Referenced in: <ul> <li><a href="#ref-for-idl-unsigned-long">4.1. Modifications to CSSStyleRule</a> <a href="#ref-for-idl-unsigned-long①">(2)</a> <a href="#ref-for-idl-unsigned-long②">(3)</a> </ul> </aside> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>@layer </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-6]</a> defines the following terms: <ul> <li><scope-end> <li><scope-start> <li>@scope </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>color </ul> <li> <a data-link-type="biblio">[CSS-CONDITIONAL-3]</a> defines the following terms: <ul> <li>@media <li>@supports <li>CSSMediaRule <li>conditional group rule </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-3]</a> defines the following terms: <ul> <li>@container </ul> <li> <a data-link-type="biblio">[CSS-GRID-2]</a> defines the following terms: <ul> <li>grid-auto-flow </ul> <li> <a data-link-type="biblio">[CSS-NESTING-1]</a> defines the following terms: <ul> <li>nested conditional group rules </ul> <li> <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: <ul> <li><style-block> <li><stylesheet> <li>at-rule <li>declaration <li>style rule </ul> <li> <a data-link-type="biblio">[CSS-UI-4]</a> defines the following terms: <ul> <li>bar </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>functional notation <li>identifier </ul> <li> <a data-link-type="biblio">[CSSOM]</a> defines the following terms: <ul> <li>CSSOMString <li>CSSRuleList <li>CSSStyleRule <li>child css rules <li>declarations <li>insert a css rule <li>remove a css rule <li>selectorText <li>serialize a css rule </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>div </ul> <li> <a data-link-type="biblio">[SELECTORS4]</a> defines the following terms: <ul> <li>:is() <li>:scope <li>:where() <li><relative-selector-list> <li><selector-list> <li>combinator <li>compound selector <li>relative selector <li>selector <li>simple selector <li>specificity <li>type selector </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>SameObject <li>undefined <li>unsigned long </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-cascade-4">[CSS-CASCADE-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/"><cite>CSS Cascading and Inheritance Level 4</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a> <dt id="biblio-css-cascade-6">[CSS-CASCADE-6] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-6/"><cite>CSS Cascading and Inheritance Level 6</cite></a>. 21 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-cascade-6/">https://www.w3.org/TR/css-cascade-6/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Tab Atkins Jr.; Chris Lilley; Lea Verou. <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. 1 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a> <dt id="biblio-css-nesting-1">[CSS-NESTING-1] <dd>Tab Atkins Jr.; Adam Argyle. <a href="https://www.w3.org/TR/css-nesting-1/"><cite>CSS Nesting Module</cite></a>. 31 August 2021. WD. URL: <a href="https://www.w3.org/TR/css-nesting-1/">https://www.w3.org/TR/css-nesting-1/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/"><cite>CSS Syntax Module Level 3</cite></a>. 24 December 2021. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 19 October 2022. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css21">[CSS21] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-cssom">[CSSOM] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://www.w3.org/TR/cssom-1/"><cite>CSS Object Model (CSSOM)</cite></a>. 26 August 2021. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-selectors4">[SELECTORS4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/"><cite>Selectors Level 4</cite></a>. 11 November 2022. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> <dt id="biblio-css-color-3">[CSS-COLOR-3] <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/"><cite>CSS Color Module Level 3</cite></a>. 18 January 2022. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a> <dt id="biblio-css-conditional-3">[CSS-CONDITIONAL-3] <dd>David Baron; Elika Etemad; Chris Lilley. <a href="https://www.w3.org/TR/css-conditional-3/"><cite>CSS Conditional Rules Module Level 3</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-conditional-3/">https://www.w3.org/TR/css-conditional-3/</a> <dt id="biblio-css-contain-3">[CSS-CONTAIN-3] <dd>Tab Atkins Jr.; Florian Rivoal; Miriam Suzanne. <a href="https://www.w3.org/TR/css-contain-3/"><cite>CSS Containment Module Level 3</cite></a>. 18 August 2022. WD. URL: <a href="https://www.w3.org/TR/css-contain-3/">https://www.w3.org/TR/css-contain-3/</a> <dt id="biblio-css-grid-2">[CSS-GRID-2] <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-2/"><cite>CSS Grid Layout Module Level 2</cite></a>. 18 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</a> <dt id="biblio-css-ui-4">[CSS-UI-4] <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/"><cite>CSS Basic User Interface Module Level 4</cite></a>. 16 March 2021. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> </dl> <h2 class="no-num no-ref heading settled" id="idl-index">IDL Index<a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://www.w3.org/TR/cssom-1/#cssstylerule"><c- g>CSSStyleRule</c-></a> { [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/cssom-1/#cssrulelist"><c- n>CSSRuleList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSRuleList" href="#dom-cssstylerule-cssrules"><c- g>cssRules</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="method" href="#dom-cssstylerule-insertrule"><c- g>insertRule</c-></a>(<a data-link-type="idl-name" href="https://www.w3.org/TR/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a href="#dom-cssstylerule-insertrule-rule-index-rule"><code><c- g>rule</c-></code></a>, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a href="#dom-cssstylerule-insertrule-rule-index-index"><code><c- g>index</c-></code></a> = 0); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-cssstylerule-deleterule"><c- g>deleteRule</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a href="#dom-cssstylerule-deleterule-index-index"><code><c- g>index</c-></code></a>); }; </pre> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> The CSSWG is currently exploring the consequences of parsing lookahead, and may adjust the allowed syntax as a result. <a href="https://github.com/w3c/csswg-drafts/issues/7961">[Issue #7961]</a> <a class="issue-return" href="#issue-8ec431e9" title="Jump to section">↵</a></div> <div class="issue"> We’d like to relax this restriction, but need to do so simultaneously for both <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#matches-pseudo">:is()</a> and <a class="css" data-link-type="maybe" href="#selectordef-">&</a>, since they’re intentionally built on the same underlying mechanisms. (<a href="https://github.com/w3c/csswg-drafts/issues/7433">Issue 7433</a>) <a class="issue-return" href="#issue-62c479a8" title="Jump to section">↵</a></div> <div class="issue"> The above paragraph will be inlined into the CSSOM algo, rather than monkey-patched. <a class="issue-return" href="#issue-bc4d708a" title="Jump to section">↵</a></div> </div> <aside class="dfn-panel" data-for="nested-style-rule"> <a href="#nested-style-rule">#nested-style-rule</a>Referenced in: <ul> <li><a href="#ref-for-nested-style-rule">2. Nesting Style Rules</a> <a href="#ref-for-nested-style-rule①">(2)</a> <li><a href="#ref-for-nested-style-rule②">2.1. Syntax</a> <a href="#ref-for-nested-style-rule③">(2)</a> <a href="#ref-for-nested-style-rule④">(3)</a> <a href="#ref-for-nested-style-rule⑤">(4)</a> <a href="#ref-for-nested-style-rule⑥">(5)</a> <li><a href="#ref-for-nested-style-rule⑦">2.2. Nesting Other At-Rules</a> <a href="#ref-for-nested-style-rule⑧">(2)</a> <a href="#ref-for-nested-style-rule⑨">(3)</a> <a href="#ref-for-nested-style-rule①⓪">(4)</a> <li><a href="#ref-for-nested-style-rule①①">2.3. Mixing Nesting Rules and Declarations</a> <a href="#ref-for-nested-style-rule①②">(2)</a> <li><a href="#ref-for-nested-style-rule①③">3. Nesting Selector: the & selector</a> <a href="#ref-for-nested-style-rule①④">(2)</a> <a href="#ref-for-nested-style-rule①⑤">(3)</a> <li><a href="#ref-for-nested-style-rule①⑥">4.1. Modifications to CSSStyleRule</a> <a href="#ref-for-nested-style-rule①⑦">(2)</a> <a href="#ref-for-nested-style-rule①⑧">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="nested-group-rules"> <a href="#nested-group-rules">#nested-group-rules</a>Referenced in: <ul> <li><a href="#ref-for-nested-group-rules">2.2. Nesting Other At-Rules</a> <a href="#ref-for-nested-group-rules①">(2)</a> <a href="#ref-for-nested-group-rules②">(3)</a> <li><a href="#ref-for-nested-group-rules③">2.2.1. Nested @scope Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="nesting-selector"> <a href="#nesting-selector">#nesting-selector</a>Referenced in: <ul> <li><a href="#ref-for-nesting-selector">2. Nesting Style Rules</a> <li><a href="#ref-for-nesting-selector①">2.1. Syntax</a> <a href="#ref-for-nesting-selector②">(2)</a> <li><a href="#ref-for-nesting-selector③">2.2. Nesting Other At-Rules</a> <li><a href="#ref-for-nesting-selector④">2.3. Mixing Nesting Rules and Declarations</a> <li><a href="#ref-for-nesting-selector⑤">3. Nesting Selector: the & selector</a> <a href="#ref-for-nesting-selector⑥">(2)</a> <a href="#ref-for-nesting-selector⑦">(3)</a> <a href="#ref-for-nesting-selector⑧">(4)</a> <a href="#ref-for-nesting-selector⑨">(5)</a> <a href="#ref-for-nesting-selector①⓪">(6)</a> </ul> </aside> <aside class="dfn-panel" data-for="selectordef-"> <a href="#selectordef-">#selectordef-</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-">2.2. Nesting Other At-Rules</a> <li><a href="#ref-for-selectordef-①">2.2.1. Nested @scope Rules</a> <li><a href="#ref-for-selectordef-②">3. Nesting Selector: the & selector</a> <a href="#ref-for-selectordef-③">(2)</a> <a href="#ref-for-selectordef-④">(3)</a> <a href="#ref-for-selectordef-⑤">(4)</a> <a href="#ref-for-selectordef-⑥">(5)</a> </ul> </aside> <aside class="dfn-panel" data-for="dom-cssstylerule-cssrules"> <a href="#dom-cssstylerule-cssrules">#dom-cssstylerule-cssrules</a>Referenced in: <ul> <li><a href="#ref-for-dom-cssstylerule-cssrules">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="dom-cssstylerule-insertrule"> <a href="#dom-cssstylerule-insertrule">#dom-cssstylerule-insertrule</a>Referenced in: <ul> <li><a href="#ref-for-dom-cssstylerule-insertrule">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <aside class="dfn-panel" data-for="dom-cssstylerule-deleterule"> <a href="#dom-cssstylerule-deleterule">#dom-cssstylerule-deleterule</a>Referenced in: <ul> <li><a href="#ref-for-dom-cssstylerule-deleterule">4.1. Modifications to CSSStyleRule</a> </ul> </aside> <script>/* script-dfn-panel */ document.body.addEventListener("click", function(e) { var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); } // Find the dfn element or panel, if any, that was clicked on. var el = e.target; var target; var hitALink = false; while(el.parentElement) { if(el.tagName == "A") { // Clicking on a link in a <dfn> shouldn't summon the panel hitALink = true; } if(el.classList.contains("dfn-paneled")) { target = "dfn"; break; } if(el.classList.contains("dfn-panel")) { target = "dfn-panel"; break; } el = el.parentElement; } if(target != "dfn-panel") { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){ el.classList.remove("on"); el.classList.remove("activated"); }); } if(target == "dfn" && !hitALink) { // open the panel var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']"); if(dfnPanel) { dfnPanel.classList.add("on"); var rect = el.getBoundingClientRect(); dfnPanel.style.left = window.scrollX + rect.right + 5 + "px"; dfnPanel.style.top = window.scrollY + rect.top + "px"; var panelRect = dfnPanel.getBoundingClientRect(); var panelWidth = panelRect.right - panelRect.left; if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) { // Reposition, because the panel is overflowing dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px"; } } else { console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']"); } } else if(target == "dfn-panel") { // Switch it to "activated" state, which pins it. el.classList.add("activated"); el.style.left = null; el.style.top = null; } }); </script>