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 Cascading and Inheritance Level 6</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <link href="https://www.w3.org/2008/site/images/favicon.ico" rel="icon"> <meta content="Bikeshed version fb1e763a4, updated Tue Mar 1 13:13:50 2022 -0800" name="generator"> <link href="https://www.w3.org/TR/css-cascade-6/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <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-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; }</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-mdn-anno */ @media (max-width: 767px) { .mdn-anno { opacity: .1 } } .mdn-anno { font: 1em sans-serif; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; border-collapse: initial; border-spacing: initial; min-width: 9em; max-width: min-content; white-space: nowrap; word-wrap: normal; hyphens: none} .mdn-anno:not(.wrapped) { opacity: 1} .mdn-anno:hover { z-index: 9 } .mdn-anno.wrapped { min-width: 0 } .mdn-anno.wrapped > :not(button) { display: none; } .mdn-anno > .mdn-anno-btn { cursor: pointer; border: none; color: #000; background: transparent; margin: -8px; float: right; padding: 10px 8px 8px 8px; outline: none; } .mdn-anno > .mdn-anno-btn > .less-than-two-engines-flag { color: red; padding-right: 2px; } .mdn-anno > .mdn-anno-btn > .all-engines-flag { color: green; padding-right: 2px; } .mdn-anno > .mdn-anno-btn > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: red } .mdn-anno > .feature > .all-engines-text { color: green } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: #CCCCCC; filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/static/images/favicons/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */ .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 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%; } 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 */ 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> <style>/* style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <style>/* style-darkmode */ @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); } } @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style type='text/css'></style><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 Cascading and Inheritance Level 6</h1> <a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2022-03-30">30 March 2022</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://drafts.csswg.org/css-cascade-6/">https://drafts.csswg.org/css-cascade-6/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-cascade-6/">https://www.w3.org/TR/css-cascade-6/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-cascade-6">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="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Invited Expert) <dd class="editor p-author h-card vcard" data-editor-id="117151"><a class="p-name fn u-url url" href="http://miriamsuzanne.com/contact">Miriam E. Suzanne</a> (Invited Expert) <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 Jr.</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-cascade-6/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> © 2022 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>® (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <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 CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. New in this level is <a href="#scoped-styles">§ 2.5 Scoped Styles</a>. <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 is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as 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-cascade” in the title, like this: “[css-cascade] …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-cascade%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>. </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 and Missing Sections</a> <li> <a href="#cascading">2 Cascading</a> <ol class="toc"> <li><a href="#cascade-sort">2.1 Cascade Sorting Order</a> <li><a href="#cascading-origins">2.2 Cascading Origins</a> <li><a href="#importance">2.3 Important Declarations: the !important annotation</a> <li><a href="#layering">2.4 Cascade Layers</a> <li> <a href="#scoped-styles">2.5 Scoped Styles</a> <ol class="toc"> <li><a href="#scope-atrule">2.5.1 Scoping Styles: the @scope rule</a> <li><a href="#scope-combinator">2.5.2 Scoped Descendant Combinator</a> <li><a href="#selector-scoping">2.5.3 Selector Scoping Notation</a> </ol> <li><a href="#preshint">2.6 Precedence of Non-CSS Presentational Hints</a> </ol> <li> <a href="#changes">3 Changes</a> <ol class="toc"> <li><a href="#additions-l5">3.1 Additions Since Level 5</a> <li><a href="#additions-l4">3.2 Additions Since Level 4</a> <li><a href="#additions-l3">3.3 Additions Since Level 3</a> <li><a href="#changes-2">3.4 Additions Since Level 2</a> </ol> <li><a href="#acknowledgments"> Acknowledgments</a> <li><a href="#priv-sec"> Privacy and Security Considerations</a> <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="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction and Missing Sections<a class="self-link" href="#intro"></a></h2> <div class="mdn-anno wrapped after"> <button class="mdn-anno-btn">✔MDN</button> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import" title="The @import CSS at-rule is used to import style rules from other style sheets.">@import</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android4+iOS Safari1+Chrome for Android18+Android WebView37+Samsung Internet1.0+Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/all" title="The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.">all</a> In all current engines. <div class="support"> Firefox27+Safari9.1+Chrome37+ <hr> Opera24+Edge79+ <hr> Edge (Legacy)NoneIENone <hr> Firefox for Android27+iOS Safari9.3+Chrome for Android37+Android WebView37+Samsung Internet3.0+Opera Mobile24+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inherit" title="The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.">inherit</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera4+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android4+iOS Safari1+Chrome for Android18+Android WebView1+Samsung Internet1.0+Opera Mobile14+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial" title="The initial CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property. This includes the CSS shorthand all, with which initial can be used to restore all CSS properties to their initial state.">initial</a> In all current engines. <div class="support"> Firefox19+Safari1.2+Chrome1+ <hr> Opera15+Edge79+ <hr> Edge (Legacy)13+IENone <hr> Firefox for Android19+iOS Safari1+Chrome for Android18+Android WebView1+Samsung Internet1.0+Opera Mobile14+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/revert" title="The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist). It can be applied to any CSS property, including the CSS shorthand all.">revert</a> In all current engines. <div class="support"> Firefox67+Safari9.1+Chrome84+ <hr> Opera70+Edge84+ <hr> Edge (Legacy)NoneIENone <hr> Firefox for Android67+iOS Safari9.3+Chrome for Android84+Android WebView84+Samsung Internet14.0+Opera Mobile60+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unset" title="The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.">unset</a> In all current engines. <div class="support"> Firefox27+Safari9.1+Chrome41+ <hr> Opera28+Edge79+ <hr> Edge (Legacy)13+IENone <hr> Firefox for Android27+iOS Safari9.3+Chrome for Android41+Android WebView41+Samsung Internet4.0+Opera Mobile28+ </div> </div> </div> <a class="self-link" href="#issue-a783701e"></a> This is a diff spec over <a href="https://www.w3.org/TR/css-cascade-5/">CSS Cascading and Inheritance Level 5</a>. It is currently an Exploratory Working Draft: if you are implementing anything, please use Level 5 as a reference. We will merge the Level 5 text into this draft once it reaches CR. <h2 class="heading settled" data-level="2" id="cascading">2. Cascading<a class="self-link" href="#cascading"></a></h2> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cascade">cascade</dfn> takes an unordered list of <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#declared-value" id="ref-for-declared-value">declared values</a> for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascaded-value" id="ref-for-cascaded-value">cascaded value</a>. <h3 class="heading settled" data-level="2.1" id="cascade-sort">2.1. Cascade Sorting Order<a class="self-link" href="#cascade-sort"></a></h3> The cascade sorts declarations according to the following criteria, in descending order of precedence: <dl> <dt id="cascade-origin"><a class="self-link" href="#cascade-origin"></a>Origin and Importance <dd> The <a data-link-type="dfn" href="#origin" id="ref-for-origin">origin</a> of a declaration is based on where it comes from and its <a data-link-type="dfn" href="#important" id="ref-for-important">importance</a> is whether or not it is declared with !important (see <a href="#importance">below</a>). The precedence of the various origins is, in descending order: <ol> <li>Transition declarations <a data-link-type="biblio" href="#biblio-css-transitions-1">[css-transitions-1]</a> <li><a data-link-type="dfn" href="#important" id="ref-for-important①">Important</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua">user agent</a> declarations <li><a data-link-type="dfn" href="#important" id="ref-for-important②">Important</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-user" id="ref-for-cascade-origin-user">user</a> declarations <li><a data-link-type="dfn" href="#important" id="ref-for-important③">Important</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-author" id="ref-for-cascade-origin-author">author</a> declarations <li>Animation declarations <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> <li><a data-link-type="dfn" href="#normal" id="ref-for-normal">Normal</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-author" id="ref-for-cascade-origin-author①">author</a> declarations <li><a data-link-type="dfn" href="#normal" id="ref-for-normal①">Normal</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-user" id="ref-for-cascade-origin-user①">user</a> declarations <li><a data-link-type="dfn" href="#normal" id="ref-for-normal②">Normal</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua①">user agent</a> declarations </ol> Declarations from <a data-link-type="dfn" href="#origin" id="ref-for-origin②">origins</a> earlier in this list win over declarations from later origins. <dt id="cascade-context"><a class="self-link" href="#cascade-context"></a>Context <dd> A document language can provide for blending declarations sourced from different <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="context" data-noexport id="encapsulation-contexts">encapsulation contexts</dfn>, such as the nested <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#tree-context" id="ref-for-tree-context">tree contexts</a> of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree">shadow trees</a> in the <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>. When comparing two declarations that are sourced from different <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts">encapsulation contexts</a>, then for <a data-link-type="dfn" href="#normal" id="ref-for-normal③">normal</a> rules the declaration from the outer context wins, and for <a data-link-type="dfn" href="#important" id="ref-for-important④">important</a> rules the declaration from the inner context wins. For this purpose, <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#tree-context" id="ref-for-tree-context①">tree contexts</a> are considered to be nested in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order" id="ref-for-concept-shadow-including-tree-order">shadow-including tree order</a>. Note: This effectively means that <a data-link-type="dfn" href="#normal" id="ref-for-normal④">normal</a> declarations belonging to an <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts①">encapsulation context</a> can set defaults that are easily overridden by the outer context, while <a data-link-type="dfn" href="#important" id="ref-for-important⑤">important</a> declarations belonging to an encapsulation context can enforce requirements that cannot be overridden by the outer context. <dt id="style-attr"><a class="self-link" href="#style-attr"></a>The Style Attribute <dd> Separately for <a data-link-type="dfn" href="#normal" id="ref-for-normal⑤">normal</a> and <a data-link-type="dfn" href="#important" id="ref-for-important⑥">important</a> declarations, declarations that are attached directly to an element (such as the <a href="https://www.w3.org/TR/css-style-attr/#interpret">contents of a style attribute</a>) rather than indirectly mapped by means of a style rule selector take precedence over declarations the same importance that are mapped via style rule. <dt id="cascade-layering"><a class="self-link" href="#cascade-layering"></a>Layers <dd> Declarations within each <a data-link-type="dfn" href="#origin" id="ref-for-origin④">origin</a> and <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts③">context</a> can be explicitly assigned to a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-layers" id="ref-for-cascade-layers">cascade layer</a>. For the purpose of this step, any declaration not assigned to an explicit layer is added to an implicit final layer. Cascade layers (like declarations) are sorted by order of appearance, see <a href="#layer-ordering"></a>. When comparing declarations that belong to different layers, then for <a data-link-type="dfn" href="#normal" id="ref-for-normal⑥">normal</a> rules the declaration whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-layers" id="ref-for-cascade-layers①">cascade layer</a> is latest in the layer order wins, and for <a data-link-type="dfn" href="#important" id="ref-for-important⑧">important</a> rules the declaration whose cascade layer is earliest wins. Note: This follows the same logic used for precedence of <a data-link-type="dfn" href="#normal" id="ref-for-normal⑦">normal</a> and <a data-link-type="dfn" href="#important" id="ref-for-important⑨">important</a> <a data-link-type="dfn" href="#origin" id="ref-for-origin⑤">origins</a>, thus the !important flag maintains the same “override” purpose in both settings. <dt id="cascade-proximity-strong"><a class="self-link" href="#cascade-proximity-strong"></a><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="strong-scoping-proximity">Strong Scoping Proximity</dfn> <dd> If two declarations both have elements selected by scoped descendant relationships applying <a data-link-type="dfn" href="#strong-scoping-proximity" id="ref-for-strong-scoping-proximity">strong scoping proximity</a>, then the declaration with the fewest generational hops between the ancestor/descendant element pair wins. If multiple such pairs are represented, their <a data-link-type="dfn" href="#strong-scoping-proximity" id="ref-for-strong-scoping-proximity①">strong scoping proximity</a> weights are compared from innermost scoping relationship to outermost scoping relationship (with any missing pairs weighted as infinity). <dt id="cascade-specificity"><a class="self-link" href="#cascade-specificity"></a>Specificity <dd> The <a href="https://www.w3.org/TR/selectors/#specificity">Selectors module</a> <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> describes how to compute the specificity of a selector. Each declaration has the same specificity as the style rule it appears in. The declaration with the highest specificity wins. <dt id="cascade-proximity-weak"><a class="self-link" href="#cascade-proximity-weak"></a><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="weak-scoping-proximity">Weak Scoping Proximity</dfn> <dd> If two declarations both have elements selected by scoped descendant relationships applying <a data-link-type="dfn" href="#weak-scoping-proximity" id="ref-for-weak-scoping-proximity">weak scoping proximity</a>, then the declaration with the fewest generational hops between the ancestor/descendant element pair wins. If multiple such pairs are represented, their <a data-link-type="dfn" href="#weak-scoping-proximity" id="ref-for-weak-scoping-proximity①">weak scoping proximity</a> weights are compared from innermost scoping relationship to outermost scoping relationship (with any missing pairs weighted as infinity). <dt id="cascade-order"><a class="self-link" href="#cascade-order"></a>Order of Appearance <dd> The last declaration in document order wins. For this purpose: <ul> <li>Style sheets are ordered as in <a href="https://drafts.csswg.org/cssom/#documentorshadowroot-final-css-style-sheets">final CSS style sheets</a>. <li>Declarations from <a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-import" id="ref-for-at-ruledef-import">imported style sheets</a> are ordered as if their style sheets were substituted in place of the @import rule. <li>Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language. <li>Declarations from style attributes are ordered according to the document order of the element the style attribute appears on, and are all placed after any style sheets. [!CSSSTYLEATTR] </ul> </dl> <a class="self-link" href="#issue-b4ed8d84"></a> Does <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scope-proximity">scope proximity</dfn> belong above or below specificity in the cascade? <a href="https://github.com/w3c/csswg-drafts/issues/6790">[Issue #6790]</a> The <dfn data-dfn-type="dfn" data-export id="output-of-the-cascade">output of the cascade<a class="self-link" href="#output-of-the-cascade"></a></dfn> is a (potentially empty) sorted list of <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#declared-value" id="ref-for-declared-value①">declared values</a> for each property on each element. <h3 class="heading settled" data-level="2.2" id="cascading-origins">2.2. Cascading Origins<a class="self-link" href="#cascading-origins"></a></h3> <a class="self-link" href="#issue-d41d8cd9"></a> <a href="https://www.w3.org/TR/css-cascade-5/#cascading-origins"><cite>CSS Cascading 5</cite> § 6.2 Cascading Origins</a> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="origin" id="origin">cascade origin</dfn> <h3 class="heading settled" data-level="2.3" id="importance">2.3. Important Declarations: the !important annotation<a class="self-link" href="#importance"></a></h3> <a class="self-link" href="#issue-d41d8cd9①"></a> <a href="https://www.w3.org/TR/css-cascade-5/#importance"><cite>CSS Cascading 5</cite> § 6.3 Important Declarations: the !important annotation</a> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="importance" id="important">important</dfn> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="normal">normal</dfn> <h3 class="heading settled" data-level="2.4" id="layering">2.4. Cascade Layers<a class="self-link" href="#layering"></a></h3> <a class="self-link" href="#issue-d41d8cd9②"></a> <a href="https://www.w3.org/TR/css-cascade-5/#layering"><cite>CSS Cascading 5</cite> § 6.4 Cascade Layers</a> <h3 class="heading settled" data-level="2.5" id="scoped-styles">2.5. Scoped Styles<a class="self-link" href="#scoped-styles"></a></h3> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scope">scope</dfn> is a subtree or fragment of a document, which can be used by selectors for more targeted matching. <a data-link-type="dfn" href="#scope" id="ref-for-scope">Scopes</a> are described in CSS through a combination of two selector lists: <ul> <li data-md> The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-scope-start"><a class="production css" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start"><scope-start></a></dfn> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list" id="ref-for-typedef-forgiving-selector-list"><forgiving-selector-list></a>. Each element matched by <a class="production css" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start①"><scope-start></a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-element" id="ref-for-scoping-element">scoping element</a>, creating a scope with itself as the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root">scoping root</a>. <li data-md> The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-scope-end"><a class="production css" data-link-type="type" href="#typedef-scope-end" id="ref-for-typedef-scope-end"><scope-end></a></dfn> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list" id="ref-for-typedef-forgiving-selector-list①"><forgiving-selector-list></a> that is <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoped-selector" id="ref-for-scoped-selector">scoped</a> by the <a class="production css" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start②"><scope-start></a> selector, with the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root①">scoping roots</a> as <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scope-element" id="ref-for-scope-element">:scope elements</a>. Each element matched by <a class="production css" data-link-type="type" href="#typedef-scope-end" id="ref-for-typedef-scope-end①"><scope-end></a> is a <a data-link-type="dfn" href="#scoping-limit" id="ref-for-scoping-limit">scoping limit</a>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scoping-limit">scoping limit</dfn> elements define the lower bounds of a scope, so that scoped selectors are not able to match any elements nested within them. </ul> Each resulting <a data-link-type="dfn" href="#scope" id="ref-for-scope①">scope</a> includes a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root②">scoping root</a> and all its descendants, up to and including any <a data-link-type="dfn" href="#scoping-limit" id="ref-for-scoping-limit①">scoping limit</a> elements, but not the descendants of those limits. <a class="self-link" href="#issue-b0a1f1ca"></a> Inclusive vs exclusive scope boundaries <a href="https://github.com/w3c/csswg-drafts/issues/6577">[Issue #6577]</a> Note: In contrast to <a href="https://www.w3.org/TR/css-scoping-1/#shadow-dom">Shadow Encapsulation</a>, which describes a persistent one-to-one relationship in the DOM between a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host">shadow host</a> and its nested <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①">shadow tree</a>, multiple overlapping <a data-link-type="dfn" href="#scope" id="ref-for-scope②">scopes</a> can be defined in relation to the same elements. <div class="example" id="example-40f46a5e"> <a class="self-link" href="#example-40f46a5e"></a> For example, an author might have wide-reaching color-scheme scopes, which overlap more narrowly-scoped design patterns such as a media object: <pre class="lang-css highlight"><c- n>@scope</c-> <c- p>(</c->.light-scheme<c- p>)</c-> <c- p>{</c-> a <c- p>{</c-> <c- k>color</c-><c- p>:</c-> darkmagenta<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@scope</c-> <c- p>(</c->.dark-scheme<c- p>)</c-> <c- p>{</c-> a <c- p>{</c-> <c- k>color</c-><c- p>:</c-> plum<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@scope</c-> <c- p>(</c->.media-object<c- p>)</c-> <c- p>{</c-> .media-image <c- p>{</c-> <c- k>border-radius</c-><c- p>:</c-> <c- m>50</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> .media-content <c- p>{</c-> <c- k>padding</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> <div class="example" id="example-ab89a972"> <a class="self-link" href="#example-ab89a972"></a> By providing <a data-link-type="dfn" href="#scoping-limit" id="ref-for-scoping-limit②">scoping limits</a>, an author can limit matching more deeply nested descendants. For example: <pre class="lang-css highlight"><c- n>@scope</c-> <c- p>(</c->.media-object<c- p>)</c-> to <c- p>(</c->.content<c- p>)</c-> <c- p>{</c-> img <c- p>{</c-> <c- k>border-radius</c-><c- p>:</c-> <c- m>50</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> <c- c>/* it is also possible to style the lower limit element itself */</c-> .content <c- p>{</c-> <c- k>padding</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> The img selector will only match image tags that are in a DOM fragment starting with any .media-object, and including all descendants until any intervening .content class. </div> <a class="self-link" href="#issue-acd126a1"></a> Should scoping limits be added to the definition of <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoped-selector" id="ref-for-scoped-selector②">scoped selectors</a>? <div class="example" id="example-132cb7e9"> <a class="self-link" href="#example-132cb7e9"></a> <a data-link-type="dfn" href="#scoping-limit" id="ref-for-scoping-limit③">Scoping limits</a> can use the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#scope-pseudo" id="ref-for-scope-pseudo">:scope</a> pseudo-class to require a specific relationship to the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root③">scoping root</a>: <pre class="lang-css highlight"><c- c>/* .content is only a limit when it is a direct child of the :scope */</c-> <c- n>@scope</c-> <c- p>(</c->.media-object<c- p>)</c-> to <c- p>(</c->:scope > .content<c- p>)</c-> <c- p>{</c-> ... <c- p>}</c-> </pre> <a data-link-type="dfn" href="#scoping-limit" id="ref-for-scoping-limit④">Scoping limits</a> can also reference elements outside their <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root④">scoping root</a> by using <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#scope-pseudo" id="ref-for-scope-pseudo①">:scope</a>. For example: <pre class="lang-css highlight"><c- c>/* .content is only a limit when the :scope is inside .sidebar */</c-> <c- n>@scope</c-> <c- p>(</c->.media-object<c- p>)</c-> to <c- p>(</c->.sidebar :scope .content<c- p>)</c-> <c- p>{</c-> ... <c- p>}</c-> </pre> </div> <h4 class="heading settled" data-level="2.5.1" id="scope-atrule">2.5.1. Scoping Styles: the <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope">@scope</a> rule<a class="self-link" href="#scope-atrule"></a></h4> The <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-scope">@scope</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#block-at-rule" id="ref-for-block-at-rule">block at-rule</a> allows authors to scope style rules in CSS, with the application of <a data-link-type="dfn" href="#weak-scoping-proximity" id="ref-for-weak-scoping-proximity②">weak scoping proximity</a> between the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root⑤">scoping root</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#selector-subject" id="ref-for-selector-subject">subject</a> of each style rule. <a class="self-link" href="#issue-fa1297bb"></a> Should <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope①">@scope</a> use strong or weak scoping proximity? <a data-link-type="dfn" href="#strong-scoping-proximity" id="ref-for-strong-scoping-proximity②">Strong scoping proximity</a> causes declarations to be weighted more strongly by scope proximity than by their selector’s specificity. <a data-link-type="dfn" href="#weak-scoping-proximity" id="ref-for-weak-scoping-proximity③">Weak scoping proximity</a> causes declarations of the same specificity to be weighted by proximity to their scoping root before falling back to source ordering, but declarations of higher specificity win over more tightly-scoped declarations. The Working Group currently leans towards weak proximity, and recommends that as a starting point for prototypes. <a href="https://github.com/w3c/csswg-drafts/issues/6790">[Issue #6790]</a> The syntax of the <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope②">@scope</a> rule is: <pre class="prod">@scope (<a class="production" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start③"><scope-start></a>) [to (<a class="production" data-link-type="type" href="#typedef-scope-end" id="ref-for-typedef-scope-end②"><scope-end></a>)]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-opt" id="ref-for-mult-opt">?</a> { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-stylesheet" id="ref-for-typedef-stylesheet"><stylesheet></a> } </pre> The <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope③">@scope</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#at-rule" id="ref-for-at-rule">at-rule</a> has three primary effects on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#style-rule" id="ref-for-style-rule">style rules</a> in its <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-stylesheet" id="ref-for-typedef-stylesheet①"><stylesheet></a>: <ul> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoped-selector" id="ref-for-scoped-selector③">Selectors are scoped</a> to the given <a data-link-type="dfn" href="#scope" id="ref-for-scope③">scope</a>, with the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scope-element" id="ref-for-scope-element①">:scope element</a> being the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root⑥">scoping root</a>. <li data-md> Selectors are given the added specificity of the most specific <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#complex" id="ref-for-complex">complex selector</a> in the <a class="production css" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start④"><scope-start></a> argument. Note: This is designed to match the behavior of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#matches-pseudo" id="ref-for-matches-pseudo">:is()</a> selector. <li data-md> The <a data-link-type="dfn" href="#cascade" id="ref-for-cascade">cascade</a> prioritizes declarations with a <a data-link-type="dfn" href="#scope-proximity" id="ref-for-scope-proximity">more proximate</a> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root⑦">scoping root</a>, regardless of specificity or source order. </ul> <div class="example" id="example-3ce03b63"> <a class="self-link" href="#example-3ce03b63"></a> The following selectors have the same specificity (1,0,1): <pre class="lang-css highlight"><c- n>@scope</c-> <c- p>(</c->#hero<c- p>)</c-> <c- p>{</c-> img <c- p>{</c-> <c- k>border-radius</c-><c- p>:</c-> <c- m>50</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> #hero img <c- p>{</c-> <c- k>border-radius</c-><c- p>:</c-> <c- m>50</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> </pre> But because <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a></code> is scoped, it is weighted more strongly in the cascade. </div> <div class="example" id="example-fe960777"> <a class="self-link" href="#example-fe960777"></a> Many existing tools implement "scoped styles" by applying a unique class or attribute to every element in a given scope or "single file component." In this example there are two scopes (<code>main-component</code> and <code>sub-component</code>) and every element is marked as part of one or both scopes using the <code>data-scope</code> attribute: <pre class="lang-html highlight"><c- p><</c-><c- f>section</c-> <c- e>data-scope</c-><c- o>=</c-><c- s>"main-component"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-> <c- e>data-scope</c-><c- o>=</c-><c- s>"main-component"</c-><c- p>></c->...<c- p><</c-><c- f>p</c-><c- p>></c-> <c- d></c-> <c- p><</c-><c- f>section</c-> <c- e>data-scope</c-><c- o>=</c-><c- s>"main-component sub-component"</c-><c- p>></c-> <c- d></c-> <c- p><</c-><c- f>p</c-> <c- e>data-scope</c-><c- o>=</c-><c- s>"sub-component"</c-><c- p>></c->...<c- p><</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>section</c-><c- p>></c-> <c- p></</c-><c- f>section</c-><c- p>></c-> </pre> Those custom scope attributes are then appended to every single selector in CSS: <pre class="lang-css highlight">p<c- p>[</c->data-scope~=<c- s>'main-component'</c-><c- p>]</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> p<c- p>[</c->data-scope~=<c- s>'sub-component'</c-><c- p>]</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- c>/* both sections are part of the outer scope */</c-> section<c- p>[</c->data-scope~=<c- s>'main-component'</c-><c- p>]</c-> <c- p>{</c-> <c- k>background</c-><c- p>:</c-> snow<c- p>;</c-> <c- p>}</c-> <c- c>/* the inner section is also part of the inner scope */</c-> section<c- p>[</c->data-scope~=<c- s>'sub-component'</c-><c- p>]</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> ghostwhite<c- p>;</c-> <c- p>}</c-> </pre> Using the <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope④">@scope</a> rule, authors and tools can replicate similar behavior with the unique attribute or class applied only to the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root⑧">scoping roots</a>: <pre class="lang-html highlight"><c- p><</c-><c- f>section</c-> <c- e>data-scope</c-><c- o>=</c-><c- s>"main-component"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->...<c- p><</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>section</c-> <c- e>data-scope</c-><c- o>=</c-><c- s>"sub-component"</c-><c- p>></c-> <c- d></c-> <c- p><</c-><c- f>p</c-><c- p>></c->...<c- p><</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>section</c-><c- p>></c-> <c- p></</c-><c- f>section</c-><c- p>></c-> </pre> Then the class or attribute can be used for establishing both upper and lower boundaries, such that scopes only overlap at those boundaries: <pre class="lang-css highlight"><c- n>@scope</c-> <c- p>([</c->data-scope=<c- s>'main-component'</c-><c- p>])</c-> to <c- p>([</c->data-scope<c- p>])</c-> <c- p>{</c-> p <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> <c- c>/* both sections are part of the outer scope */</c-> section <c- p>{</c-> <c- k>background</c-><c- p>:</c-> snow<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@scope</c-> <c- p>([</c->data-scope=<c- s>'sub-component'</c-><c- p>])</c-> to <c- p>([</c->data-scope<c- p>])</c-> <c- p>{</c-> p <c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> <c- c>/* the inner section is also part of the inner scope */</c-> section <c- p>{</c-> <c- k>color</c-><c- p>:</c-> ghostwhite<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope⑤">@scope</a> rules can be nested. In this case, just as with the nested style rules, the selectors of the inner @scope (including those defining its <a data-link-type="dfn" href="#scope" id="ref-for-scope④">scope</a>) are <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoped-selector" id="ref-for-scoped-selector④">scoped by</a> the selectors of the outer one. <h4 class="heading settled" data-level="2.5.2" id="scope-combinator">2.5.2. Scoped Descendant Combinator<a class="self-link" href="#scope-combinator"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="scoped-descendant-combinator">scoped descendant combinator</dfn> describes a descendant relationship between two elements. A selector of the form A >> B represents an element <code>B</code> that is an arbitrary descendant of some ancestor element <code>A</code>. This combinator differs from the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#descendant-combinator" id="ref-for-descendant-combinator">descendant combinator</a> in that it applies <a data-link-type="dfn" href="#weak-scoping-proximity" id="ref-for-weak-scoping-proximity④">weak scoping proximity</a> to the relationship between A and B. It does not change the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scope-element" id="ref-for-scope-element②">:scope element</a>. <a class="self-link" href="#issue-311fc45b"></a> Should the <a data-link-type="dfn" href="#scoped-descendant-combinator" id="ref-for-scoped-descendant-combinator">scoped descendant combinator</a> use strong or weak scoping proximity? Should it even exist? It’s defined here to work the way many people expected the regular <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#descendant-combinator" id="ref-for-descendant-combinator①">descendant combinator</a> to work... <div class="example" id="example-de232c97"> <a class="self-link" href="#example-de232c97"></a> This means that style rules using the <a data-link-type="dfn" href="#scoped-descendant-combinator" id="ref-for-scoped-descendant-combinator①">scoped descendant combinator</a> are sorted by specificity just like the regular <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#descendant-combinator" id="ref-for-descendant-combinator②">descendant combinator</a>, except that when their specificities are equal the more tightly-scoped declaration wins. In this example the <code><a></code> element’s color will be determined by the nearest ancestor with either a light-scheme or dark-scheme class. (If the descendant selector had been used, its color would always be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-plum" id="ref-for-valdef-color-plum">plum</a>, because it is later in the source order.) <pre>.light-scheme >> a { color: darkmagenta; } .dark-scheme >> a { color: plum; } </pre> However if the <code><a></code> element has a light-scheme ancestor and is focused, its color will be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-teal" id="ref-for-valdef-color-teal">teal</a> even if it has a nearer dark-scheme ancestor, because there is no equivalent dark-scheme rule. <pre>.light-scheme >> a:focus { color: teal; } </pre> </div> Note: Most simple scoping relationships can be represented with this syntax, rather than the more complex <a data-link-type="dfn" href="#selector-scoping-notation" id="ref-for-selector-scoping-notation">selector scoping notation</a> defined below. <h4 class="heading settled" data-level="2.5.3" id="selector-scoping">2.5.3. Selector Scoping Notation<a class="self-link" href="#selector-scoping"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="selector-scoping-notation">selector scoping notation</dfn> allows <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#selector" id="ref-for-selector">selectors</a> to be scoped to a subtree of the document, and allows the possibility of excluding nested subtrees. It is prepended to the selector or selector list, and its syntax is as follows: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-selector-scope"><a class="production" data-link-type="type" href="#typedef-selector-scope" id="ref-for-typedef-selector-scope"><selector-scope></a></dfn> = ( <a class="production" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start⑤"><scope-start></a> [/ <a class="production" data-link-type="type" href="#typedef-scope-end" id="ref-for-typedef-scope-end③"><scope-end></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-opt" id="ref-for-mult-opt①">?</a> ) </pre> If, after parsing, <a class="production css" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start⑥"><scope-start></a> is an empty list, the selector is valid but matches nothing. Otherwise, the selector matches any element that is within the <a data-link-type="dfn" href="#scope" id="ref-for-scope⑤">scope</a> described by the given <scope-start> and <a class="production css" data-link-type="type" href="#typedef-scope-end" id="ref-for-typedef-scope-end④"><scope-end></a> selectors. <div class="note" role="note"> The purpose of the <a data-link-type="dfn" href="#selector-scoping-notation" id="ref-for-selector-scoping-notation①">selector scoping notation</a> is to allow adding <a data-link-type="dfn" href="#scoping-limit" id="ref-for-scoping-limit⑤">scoping limits</a> to a selector: <pre class="lang-css highlight"><c- p>(</c->.post / .comments<c- p>)</c-> .title <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>2</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> </pre> Without any such lower limits, the <a data-link-type="dfn" href="#selector-scoping-notation" id="ref-for-selector-scoping-notation②">selector scoping notation</a> is similar to existing descendant selectors, except that the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root⑨">scoping root</a> can be matched by the selector as well. </div> The specificity of the most specific <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#complex" id="ref-for-complex①">complex selector</a> in <a class="production css" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start⑧"><scope-start></a> is added to the specificity of each such scoped selector. The specificity of the <a class="production css" data-link-type="type" href="#typedef-scope-end" id="ref-for-typedef-scope-end⑤"><scope-end></a> is ignored. The <a data-link-type="dfn" href="#selector-scoping-notation" id="ref-for-selector-scoping-notation③">selector scoping notation</a> also applies <a data-link-type="dfn" href="#weak-scoping-proximity" id="ref-for-weak-scoping-proximity⑤">weak scoping proximity</a> between the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoping-root" id="ref-for-scoping-root①⓪">scoping root</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#selector-subject" id="ref-for-selector-subject①">subject</a> of the scoped selector. <a class="self-link" href="#issue-8c513c1f"></a> Should this have the same <a data-link-type="dfn" href="#scope-proximity" id="ref-for-scope-proximity①">scope proximity</a> weighting as <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope⑦">@scope</a> or different scope proximity weighting (or no scope proximity weighting)? <div class="example" id="example-d6cf406e"> <a class="self-link" href="#example-d6cf406e"></a> For example, these three selectors will all select the same elements, with the same specificity: <pre class="lang-css highlight"><c- p>(</c->.ancestor<c- p>)</c-> .child <c- p>{</c-> <c- k>color</c-><c- p>:</c-> darkmagenta<c- p>;</c-> <c- p>}</c-> .child<c- nf>:is</c-><c- p>(</c->.ancestor<c- p>,</c-> .ancestor *<c- p>)</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> darkmagenta<c- p>;</c-> <c- p>}</c-> .ancestor.child<c- p>,</c-> .ancestor .child <c- p>{</c-> <c- k>color</c-><c- p>:</c-> darkmagenta<c- p>;</c-> <c- p>}</c-> </pre> However the first rule will win, because it also applies <a data-link-type="dfn" href="#weak-scoping-proximity" id="ref-for-weak-scoping-proximity⑥">weak scoping proximity</a>. </div> <a class="self-link" href="#issue-bf826bc4"></a> How does this interact with <a data-link-type="biblio" href="#biblio-css-nesting-1">[CSS-NESTING-1]</a>? <a class="self-link" href="#issue-d581e234"></a> This notation was added in order to allow scoping limits to be applied within <code>querySelector()</code>. Is this something we want to have? <h3 class="heading settled" data-level="2.6" id="preshint">2.6. Precedence of Non-CSS Presentational Hints<a class="self-link" href="#preshint"></a></h3> <a class="self-link" href="#issue-d41d8cd9③"></a> <a href="https://www.w3.org/TR/css-cascade-5/#layering"><cite>CSS Cascading 5</cite> § 6.4 Cascade Layers</a> <h2 class="heading settled" data-level="3" id="changes">3. Changes<a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" data-level="3.1" id="additions-l5">3.1. Additions Since Level 5<a class="self-link" href="#additions-l5"></a></h3> The following features have been added since <a href="https://www.w3.org/TR/css-cascade-5/">Level 5</a>: <ul> <li data-md> The definition of a <a data-link-type="dfn" href="#scope" id="ref-for-scope⑥">scope</a>, as described by a combination of <a class="production css" data-link-type="type" href="#typedef-scope-start" id="ref-for-typedef-scope-start⑨"><scope-start></a> and <a class="production css" data-link-type="type" href="#typedef-scope-end" id="ref-for-typedef-scope-end⑥"><scope-end></a> selectors. <li data-md> The in-scope (:in()) pseudo-class for selecting with lower-boundaries <li data-md> The <a class="css" data-link-type="maybe" href="#at-ruledef-scope" id="ref-for-at-ruledef-scope⑧">@scope</a> rule for creating scoped stylesheets <li data-md> The definition of <a data-link-type="dfn" href="#scope-proximity" id="ref-for-scope-proximity④">scope proximity</a> in the cascade </ul> <h3 class="heading settled" data-level="3.2" id="additions-l4">3.2. Additions Since Level 4<a class="self-link" href="#additions-l4"></a></h3> The following features have been added since <a href="https://www.w3.org/TR/css-cascade-4/">Level 4</a>: <ul> <li data-md> Added <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-layers" id="ref-for-cascade-layers③">cascade layers</a> to the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①">cascade</a> sort criteria (and defined style attributes as a distinct step of the cascade sort criteria so that they interact appropriately). <li data-md> Introduced the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-layer" id="ref-for-at-ruledef-layer">@layer</a> rule for defining cascade layers. <li data-md> Added layer/layer() option to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-import" id="ref-for-at-ruledef-import②">@import</a> definition. <li data-md> Introduced the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer">revert-layer</a> keyword for rolling back values to previous layers. </ul> <h3 class="heading settled" data-level="3.3" id="additions-l3">3.3. Additions Since Level 3<a class="self-link" href="#additions-l3"></a></h3> The following features have been added since <a href="https://www.w3.org/TR/css-cascade-3/">Level 3</a>: <ul> <li data-md> Introduced <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-revert" id="ref-for-valdef-all-revert">revert</a> keyword, for rolling back the cascade. <li data-md> Introduced <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-5/#funcdef-supports" id="ref-for-funcdef-supports">supports()</a> syntax for supports-conditional <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-import" id="ref-for-at-ruledef-import③">@import</a> rules. <li data-md> Added <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts④">encapsulation context</a> to the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade③">cascade</a> sort criteria to accommodate Shadow DOM. <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> <li data-md> Defined the property two aliasing mechanisms CSS uses to support legacy syntaxes. See <a href="https://www.w3.org/TR/css-cascade-4/#aliasing"><cite>CSS Cascading 4</cite> § 3.1 Property Aliasing</a>. </ul> <h3 class="heading settled" data-level="3.4" id="changes-2">3.4. Additions Since Level 2<a class="self-link" href="#changes-2"></a></h3> The following features have been added since <a href="http://www.w3.org/TR/CSS2/cascade.html">Level 2</a>: <ul> <li>The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-cascade-5/#propdef-all" id="ref-for-propdef-all">all</a> shorthand <li>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-initial" id="ref-for-valdef-all-initial">initial</a> keyword <li>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-unset" id="ref-for-valdef-all-unset">unset</a> keyword <li>Incorporation of animations and transitions into the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade④">cascade</a>. </ul> <h2 class="no-num heading settled" id="acknowledgments">Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> David Baron, Tantek Çelik, Keith Grant, Giuseppe Gurgone, Theresa O’Connor, Florian Rivoal, Noam Rosenthal, Simon Sapin, Jen Simmons, Nicole Sullivan, Lea Verou, and Boris Zbarsky contributed to this specification. <h2 class="no-num heading settled" id="priv-sec"> Privacy and Security Considerations<a class="self-link" href="#priv-sec"></a></h2> <ul> <li data-md> The cascade process does not distinguish between same-origin and cross-origin stylesheets, enabling the content of cross-origin stylesheets to be inferred from the computed styles they apply to a document. <li data-md> User preferences and UA defaults expressed via application of style rules are exposed by the cascade process, and can be inferred from the computed styles they apply to a document. <li data-md> The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-import" id="ref-for-at-ruledef-import④">@import</a> rule does not apply the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#cors-protocol" id="ref-for-cors-protocol">CORS protocol</a> to loading cross-origin stylesheets, instead allowing them to be freely imported and applied. <li data-md> The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-import" id="ref-for-at-ruledef-import⑤">@import</a> rule assumes that resources without <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type"><code>Content-Type</code> metadata</a> (or any same-origin file if the host document is in quirks mode) are <code>text/css</code>, potentially allowing arbitrary files to be imported into the page and interpreted as CSS, potentially allowing sensitive data to be inferred from the computed styles they apply to a document. </ul> </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">[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. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <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="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://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="http://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="http://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="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://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="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://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="#cascade">cascade</a>, in § 2 <li><a href="#origin">cascade origin</a>, in § 2.2 <li><a href="#encapsulation-contexts">context</a>, in § 2.1 <li><a href="#encapsulation-contexts">encapsulation contexts</a>, in § 2.1 <li><a href="#important">importance</a>, in § 2.3 <li><a href="#important">important</a>, in § 2.3 <li><a href="#normal">normal</a>, in § 2.3 <li><a href="#origin">origin</a>, in § 2.2 <li><a href="#output-of-the-cascade">output of the cascade</a>, in § 2.1 <li><a href="#at-ruledef-scope">@scope</a>, in § 2.5.1 <li><a href="#scope">scope</a>, in § 2.5 <li><a href="#scoped-descendant-combinator">scoped descendant combinator</a>, in § 2.5.2 <li><a href="#typedef-scope-end"><scope-end></a>, in § 2.5 <li><a href="#scope-proximity">scope proximity</a>, in § 2.1 <li><a href="#typedef-scope-start"><scope-start></a>, in § 2.5 <li><a href="#scoping-limit">scoping limit</a>, in § 2.5 <li><a href="#typedef-selector-scope"><selector-scope></a>, in § 2.5.3 <li><a href="#selector-scoping-notation">selector scoping notation</a>, in § 2.5.3 <li><a href="#strong-scoping-proximity">Strong Scoping Proximity</a>, in § 2.1 <li><a href="#weak-scoping-proximity">Weak Scoping Proximity</a>, in § 2.1 </ul> <aside class="dfn-panel" data-for="term-for-at-ruledef-import"> <a href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-import">https://drafts.csswg.org/css-cascade-5/#at-ruledef-import</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-import">2.1. Cascade Sorting Order</a> <a href="#ref-for-at-ruledef-import①">(2)</a> <li><a href="#ref-for-at-ruledef-import②">3.2. Additions Since Level 4</a> <li><a href="#ref-for-at-ruledef-import③">3.3. Additions Since Level 3</a> <li><a href="#ref-for-at-ruledef-import④"> Privacy and Security Considerations</a> <a href="#ref-for-at-ruledef-import⑤">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-layer"> <a href="https://drafts.csswg.org/css-cascade-5/#at-ruledef-layer">https://drafts.csswg.org/css-cascade-5/#at-ruledef-layer</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-layer">3.2. Additions Since Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-all"> <a href="https://drafts.csswg.org/css-cascade-5/#propdef-all">https://drafts.csswg.org/css-cascade-5/#propdef-all</a>Referenced in: <ul> <li><a href="#ref-for-propdef-all">3.4. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cascade-origin-author"> <a href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-author">https://drafts.csswg.org/css-cascade-5/#cascade-origin-author</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-author">2.1. Cascade Sorting Order</a> <a href="#ref-for-cascade-origin-author①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cascade-layers"> <a href="https://drafts.csswg.org/css-cascade-5/#cascade-layers">https://drafts.csswg.org/css-cascade-5/#cascade-layers</a>Referenced in: <ul> <li><a href="#ref-for-cascade-layers">2.1. Cascade Sorting Order</a> <a href="#ref-for-cascade-layers①">(2)</a> <a href="#ref-for-cascade-layers②">(3)</a> <li><a href="#ref-for-cascade-layers③">3.2. Additions Since Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cascaded-value"> <a href="https://drafts.csswg.org/css-cascade-5/#cascaded-value">https://drafts.csswg.org/css-cascade-5/#cascaded-value</a>Referenced in: <ul> <li><a href="#ref-for-cascaded-value">2. Cascading</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-declared-value"> <a href="https://drafts.csswg.org/css-cascade-5/#declared-value">https://drafts.csswg.org/css-cascade-5/#declared-value</a>Referenced in: <ul> <li><a href="#ref-for-declared-value">2. Cascading</a> <li><a href="#ref-for-declared-value①">2.1. Cascade Sorting Order</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-all-initial"> <a href="https://drafts.csswg.org/css-cascade-5/#valdef-all-initial">https://drafts.csswg.org/css-cascade-5/#valdef-all-initial</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-initial">3.4. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-all-revert"> <a href="https://drafts.csswg.org/css-cascade-5/#valdef-all-revert">https://drafts.csswg.org/css-cascade-5/#valdef-all-revert</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-revert">3.3. Additions Since Level 3</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-all-revert-layer"> <a href="https://drafts.csswg.org/css-cascade-5/#valdef-all-revert-layer">https://drafts.csswg.org/css-cascade-5/#valdef-all-revert-layer</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-revert-layer">3.2. Additions Since Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-all-unset"> <a href="https://drafts.csswg.org/css-cascade-5/#valdef-all-unset">https://drafts.csswg.org/css-cascade-5/#valdef-all-unset</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-unset">3.4. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cascade-origin-user"> <a href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-user">https://drafts.csswg.org/css-cascade-5/#cascade-origin-user</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-user">2.1. Cascade Sorting Order</a> <a href="#ref-for-cascade-origin-user①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cascade-origin-ua"> <a href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua">https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-ua">2.1. Cascade Sorting Order</a> <a href="#ref-for-cascade-origin-ua①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-color-plum"> <a href="https://drafts.csswg.org/css-color-4/#valdef-color-plum">https://drafts.csswg.org/css-color-4/#valdef-color-plum</a>Referenced in: <ul> <li><a href="#ref-for-valdef-color-plum">2.5.2. Scoped Descendant Combinator</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-color-teal"> <a href="https://drafts.csswg.org/css-color-4/#valdef-color-teal">https://drafts.csswg.org/css-color-4/#valdef-color-teal</a>Referenced in: <ul> <li><a href="#ref-for-valdef-color-teal">2.5.2. Scoped Descendant Combinator</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-funcdef-supports"> <a href="https://drafts.csswg.org/css-conditional-5/#funcdef-supports">https://drafts.csswg.org/css-conditional-5/#funcdef-supports</a>Referenced in: <ul> <li><a href="#ref-for-funcdef-supports">3.3. Additions Since Level 3</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-tree-context"> <a href="https://drafts.csswg.org/css-scoping-1/#tree-context">https://drafts.csswg.org/css-scoping-1/#tree-context</a>Referenced in: <ul> <li><a href="#ref-for-tree-context">2.1. Cascade Sorting Order</a> <a href="#ref-for-tree-context①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-stylesheet"> <a href="https://drafts.csswg.org/css-syntax-3/#typedef-stylesheet">https://drafts.csswg.org/css-syntax-3/#typedef-stylesheet</a>Referenced in: <ul> <li><a href="#ref-for-typedef-stylesheet">2.5.1. Scoping Styles: the @scope rule</a> <a href="#ref-for-typedef-stylesheet①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-rule"> <a href="https://drafts.csswg.org/css-syntax-3/#at-rule">https://drafts.csswg.org/css-syntax-3/#at-rule</a>Referenced in: <ul> <li><a href="#ref-for-at-rule">2.5.1. Scoping Styles: the @scope rule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-block-at-rule"> <a href="https://drafts.csswg.org/css-syntax-3/#block-at-rule">https://drafts.csswg.org/css-syntax-3/#block-at-rule</a>Referenced in: <ul> <li><a href="#ref-for-block-at-rule">2.5.1. Scoping Styles: the @scope rule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-style-rule"> <a href="https://drafts.csswg.org/css-syntax-3/#style-rule">https://drafts.csswg.org/css-syntax-3/#style-rule</a>Referenced in: <ul> <li><a href="#ref-for-style-rule">2.5.1. Scoping Styles: the @scope rule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-mult-opt"> <a href="https://drafts.csswg.org/css-values-3/#mult-opt">https://drafts.csswg.org/css-values-3/#mult-opt</a>Referenced in: <ul> <li><a href="#ref-for-mult-opt">2.5.1. Scoping Styles: the @scope rule</a> <li><a href="#ref-for-mult-opt①">2.5.3. Selector Scoping Notation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-element-shadow-host"> <a href="https://dom.spec.whatwg.org/#element-shadow-host">https://dom.spec.whatwg.org/#element-shadow-host</a>Referenced in: <ul> <li><a href="#ref-for-element-shadow-host">2.5. Scoped Styles</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-shadow-tree"> <a href="https://dom.spec.whatwg.org/#concept-shadow-tree">https://dom.spec.whatwg.org/#concept-shadow-tree</a>Referenced in: <ul> <li><a href="#ref-for-concept-shadow-tree">2.1. Cascade Sorting Order</a> <li><a href="#ref-for-concept-shadow-tree①">2.5. Scoped Styles</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-shadow-including-tree-order"> <a href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order">https://dom.spec.whatwg.org/#concept-shadow-including-tree-order</a>Referenced in: <ul> <li><a href="#ref-for-concept-shadow-including-tree-order">2.1. Cascade Sorting Order</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cors-protocol"> <a href="https://fetch.spec.whatwg.org/#cors-protocol">https://fetch.spec.whatwg.org/#cors-protocol</a>Referenced in: <ul> <li><a href="#ref-for-cors-protocol"> Privacy and Security Considerations</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-img-element"> <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element</a>Referenced in: <ul> <li><a href="#ref-for-the-img-element">2.5.1. Scoping Styles: the @scope rule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-matches-pseudo"> <a href="https://drafts.csswg.org/selectors-4/#matches-pseudo">https://drafts.csswg.org/selectors-4/#matches-pseudo</a>Referenced in: <ul> <li><a href="#ref-for-matches-pseudo">2.5.1. Scoping Styles: the @scope rule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-scope-pseudo"> <a href="https://drafts.csswg.org/selectors-4/#scope-pseudo">https://drafts.csswg.org/selectors-4/#scope-pseudo</a>Referenced in: <ul> <li><a href="#ref-for-scope-pseudo">2.5. Scoped Styles</a> <a href="#ref-for-scope-pseudo①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-scope-element"> <a href="https://drafts.csswg.org/selectors-4/#scope-element">https://drafts.csswg.org/selectors-4/#scope-element</a>Referenced in: <ul> <li><a href="#ref-for-scope-element">2.5. Scoped Styles</a> <li><a href="#ref-for-scope-element①">2.5.1. Scoping Styles: the @scope rule</a> <li><a href="#ref-for-scope-element②">2.5.2. Scoped Descendant Combinator</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-forgiving-selector-list"> <a href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list">https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list</a>Referenced in: <ul> <li><a href="#ref-for-typedef-forgiving-selector-list">2.5. Scoped Styles</a> <a href="#ref-for-typedef-forgiving-selector-list①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-complex"> <a href="https://drafts.csswg.org/selectors-4/#complex">https://drafts.csswg.org/selectors-4/#complex</a>Referenced in: <ul> <li><a href="#ref-for-complex">2.5.1. Scoping Styles: the @scope rule</a> <li><a href="#ref-for-complex①">2.5.3. Selector Scoping Notation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-descendant-combinator"> <a href="https://drafts.csswg.org/selectors-4/#descendant-combinator">https://drafts.csswg.org/selectors-4/#descendant-combinator</a>Referenced in: <ul> <li><a href="#ref-for-descendant-combinator">2.5.2. Scoped Descendant Combinator</a> <a href="#ref-for-descendant-combinator①">(2)</a> <a href="#ref-for-descendant-combinator②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-scoped-selector"> <a href="https://drafts.csswg.org/selectors-4/#scoped-selector">https://drafts.csswg.org/selectors-4/#scoped-selector</a>Referenced in: <ul> <li><a href="#ref-for-scoped-selector">2.5. Scoped Styles</a> <a href="#ref-for-scoped-selector①">(2)</a> <a href="#ref-for-scoped-selector②">(3)</a> <li><a href="#ref-for-scoped-selector③">2.5.1. Scoping Styles: the @scope rule</a> <a href="#ref-for-scoped-selector④">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-scoping-element"> <a href="https://drafts.csswg.org/selectors-4/#scoping-element">https://drafts.csswg.org/selectors-4/#scoping-element</a>Referenced in: <ul> <li><a href="#ref-for-scoping-element">2.5. Scoped Styles</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-scoping-root"> <a href="https://drafts.csswg.org/selectors-4/#scoping-root">https://drafts.csswg.org/selectors-4/#scoping-root</a>Referenced in: <ul> <li><a href="#ref-for-scoping-root">2.5. Scoped Styles</a> <a href="#ref-for-scoping-root①">(2)</a> <a href="#ref-for-scoping-root②">(3)</a> <a href="#ref-for-scoping-root③">(4)</a> <a href="#ref-for-scoping-root④">(5)</a> <li><a href="#ref-for-scoping-root⑤">2.5.1. Scoping Styles: the @scope rule</a> <a href="#ref-for-scoping-root⑥">(2)</a> <a href="#ref-for-scoping-root⑦">(3)</a> <a href="#ref-for-scoping-root⑧">(4)</a> <li><a href="#ref-for-scoping-root⑨">2.5.3. Selector Scoping Notation</a> <a href="#ref-for-scoping-root①⓪">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selector"> <a href="https://drafts.csswg.org/selectors-4/#selector">https://drafts.csswg.org/selectors-4/#selector</a>Referenced in: <ul> <li><a href="#ref-for-selector">2.5.3. Selector Scoping Notation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selector-subject"> <a href="https://drafts.csswg.org/selectors-4/#selector-subject">https://drafts.csswg.org/selectors-4/#selector-subject</a>Referenced in: <ul> <li><a href="#ref-for-selector-subject">2.5.1. Scoping Styles: the @scope rule</a> <li><a href="#ref-for-selector-subject①">2.5.3. Selector Scoping Notation</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>@import <li>@layer <li>all <li>author origin <li>cascade layers <li>cascaded value <li>declared value <li>initial <li>revert <li>revert-layer <li>unset <li>user origin <li>user-agent origin </ul> <li> <a data-link-type="biblio">[css-color-4]</a> defines the following terms: <ul> <li>plum <li>teal </ul> <li> <a data-link-type="biblio">[css-conditional-5]</a> defines the following terms: <ul> <li>supports() </ul> <li> <a data-link-type="biblio">[css-scoping-1]</a> defines the following terms: <ul> <li>tree context </ul> <li> <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms: <ul> <li><stylesheet> <li>at-rule <li>block at-rule <li>style rule </ul> <li> <a data-link-type="biblio">[css-values-3]</a> defines the following terms: <ul> <li>? </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>shadow host <li>shadow tree <li>shadow-including tree order </ul> <li> <a data-link-type="biblio">[FETCH]</a> defines the following terms: <ul> <li>cors protocol </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>img </ul> <li> <a data-link-type="biblio">[selectors-4]</a> defines the following terms: <ul> <li>:is() <li>:scope <li>:scope element <li><forgiving-selector-list> <li>complex selector <li>descendant combinator <li>scoped selector <li>scoping element <li>scoping root <li>selector <li>subject </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-animations-1">[CSS-ANIMATIONS-1] <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/"><cite>CSS Animations Level 1</cite></a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a> <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-conditional-5">[CSS-CONDITIONAL-5] <dd>David Baron; Elika Etemad; Chris Lilley. <a href="https://www.w3.org/TR/css-conditional-5/"><cite>CSS Conditional Rules Module Level 5</cite></a>. 21 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-conditional-5/">https://www.w3.org/TR/css-conditional-5/</a> <dt id="biblio-css-scoping-1">[CSS-SCOPING-1] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-scoping-1/"><cite>CSS Scoping Module Level 1</cite></a>. 3 April 2014. WD. URL: <a href="https://www.w3.org/TR/css-scoping-1/">https://www.w3.org/TR/css-scoping-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-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/"><cite>CSS Transitions</cite></a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. 6 June 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-fetch">[FETCH] <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/"><cite>Fetch Standard</cite></a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</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-select">[SELECT] <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/"><cite>Selectors Level 3</cite></a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/"><cite>Selectors Level 4</cite></a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</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-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>. 15 December 2021. WD. 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-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="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> This is a diff spec over <a href="https://www.w3.org/TR/css-cascade-5/">CSS Cascading and Inheritance Level 5</a>. It is currently an Exploratory Working Draft: if you are implementing anything, please use Level 5 as a reference. We will merge the Level 5 text into this draft once it reaches CR. <a class="issue-return" href="#issue-a783701e" title="Jump to section">↵</a></div> <div class="issue"> Does scope proximity belong above or below specificity in the cascade? <a href="https://github.com/w3c/csswg-drafts/issues/6790">[Issue #6790]</a> <a class="issue-return" href="#issue-b4ed8d84" title="Jump to section">↵</a></div> <div class="issue"> <a href="https://www.w3.org/TR/css-cascade-5/#cascading-origins"><cite>CSS Cascading 5</cite> § 6.2 Cascading Origins</a> <a class="issue-return" href="#issue-d41d8cd9" title="Jump to section">↵</a></div> <div class="issue"> <a href="https://www.w3.org/TR/css-cascade-5/#importance"><cite>CSS Cascading 5</cite> § 6.3 Important Declarations: the !important annotation</a> <a class="issue-return" href="#issue-d41d8cd9①" title="Jump to section">↵</a></div> <div class="issue"> <a href="https://www.w3.org/TR/css-cascade-5/#layering"><cite>CSS Cascading 5</cite> § 6.4 Cascade Layers</a> <a class="issue-return" href="#issue-d41d8cd9②" title="Jump to section">↵</a></div> <div class="issue"> Inclusive vs exclusive scope boundaries <a href="https://github.com/w3c/csswg-drafts/issues/6577">[Issue #6577]</a> <a class="issue-return" href="#issue-b0a1f1ca" title="Jump to section">↵</a></div> <div class="issue"> Should scoping limits be added to the definition of <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#scoped-selector">scoped selectors</a>? <a class="issue-return" href="#issue-acd126a1" title="Jump to section">↵</a></div> <div class="issue"> Should <a class="css" data-link-type="maybe" href="#at-ruledef-scope">@scope</a> use strong or weak scoping proximity? <a data-link-type="dfn" href="#strong-scoping-proximity">Strong scoping proximity</a> causes declarations to be weighted more strongly by scope proximity than by their selector’s specificity. <a data-link-type="dfn" href="#weak-scoping-proximity">Weak scoping proximity</a> causes declarations of the same specificity to be weighted by proximity to their scoping root before falling back to source ordering, but declarations of higher specificity win over more tightly-scoped declarations. The Working Group currently leans towards weak proximity, and recommends that as a starting point for prototypes. <a href="https://github.com/w3c/csswg-drafts/issues/6790">[Issue #6790]</a> <a class="issue-return" href="#issue-fa1297bb" title="Jump to section">↵</a></div> <div class="issue"> Should the <a data-link-type="dfn" href="#scoped-descendant-combinator">scoped descendant combinator</a> use strong or weak scoping proximity? Should it even exist? It’s defined here to work the way many people expected the regular <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#descendant-combinator">descendant combinator</a> to work... <a class="issue-return" href="#issue-311fc45b" title="Jump to section">↵</a></div> <div class="issue"> Should this have the same <a data-link-type="dfn" href="#scope-proximity">scope proximity</a> weighting as <a class="css" data-link-type="maybe" href="#at-ruledef-scope">@scope</a> or different scope proximity weighting (or no scope proximity weighting)? <a class="issue-return" href="#issue-8c513c1f" title="Jump to section">↵</a></div> <div class="issue"> How does this interact with <a data-link-type="biblio" href="#biblio-css-nesting-1">[CSS-NESTING-1]</a>? <a class="issue-return" href="#issue-bf826bc4" title="Jump to section">↵</a></div> <div class="issue"> This notation was added in order to allow scoping limits to be applied within <code>querySelector()</code>. Is this something we want to have? <a class="issue-return" href="#issue-d581e234" title="Jump to section">↵</a></div> <div class="issue"> <a href="https://www.w3.org/TR/css-cascade-5/#layering"><cite>CSS Cascading 5</cite> § 6.4 Cascade Layers</a> <a class="issue-return" href="#issue-d41d8cd9③" title="Jump to section">↵</a></div> </div> <aside class="dfn-panel" data-for="cascade"> <a href="#cascade">#cascade</a>Referenced in: <ul> <li><a href="#ref-for-cascade">2.5.1. Scoping Styles: the @scope rule</a> <li><a href="#ref-for-cascade①">3.2. Additions Since Level 4</a> <a href="#ref-for-cascade②">(2)</a> <li><a href="#ref-for-cascade③">3.3. Additions Since Level 3</a> <li><a href="#ref-for-cascade④">3.4. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="encapsulation-contexts"> <a href="#encapsulation-contexts">#encapsulation-contexts</a>Referenced in: <ul> <li><a href="#ref-for-encapsulation-contexts">2.1. Cascade Sorting Order</a> <a href="#ref-for-encapsulation-contexts①">(2)</a> <a href="#ref-for-encapsulation-contexts②">(3)</a> <a href="#ref-for-encapsulation-contexts③">(4)</a> <li><a href="#ref-for-encapsulation-contexts④">3.3. Additions Since Level 3</a> </ul> </aside> <aside class="dfn-panel" data-for="strong-scoping-proximity"> <a href="#strong-scoping-proximity">#strong-scoping-proximity</a>Referenced in: <ul> <li><a href="#ref-for-strong-scoping-proximity">2.1. Cascade Sorting Order</a> <a href="#ref-for-strong-scoping-proximity①">(2)</a> <li><a href="#ref-for-strong-scoping-proximity②">2.5.1. Scoping Styles: the @scope rule</a> </ul> </aside> <aside class="dfn-panel" data-for="weak-scoping-proximity"> <a href="#weak-scoping-proximity">#weak-scoping-proximity</a>Referenced in: <ul> <li><a href="#ref-for-weak-scoping-proximity">2.1. Cascade Sorting Order</a> <a href="#ref-for-weak-scoping-proximity①">(2)</a> <li><a href="#ref-for-weak-scoping-proximity②">2.5.1. Scoping Styles: the @scope rule</a> <a href="#ref-for-weak-scoping-proximity③">(2)</a> <li><a href="#ref-for-weak-scoping-proximity④">2.5.2. Scoped Descendant Combinator</a> <li><a href="#ref-for-weak-scoping-proximity⑤">2.5.3. Selector Scoping Notation</a> <a href="#ref-for-weak-scoping-proximity⑥">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="scope-proximity"> <a href="#scope-proximity">#scope-proximity</a>Referenced in: <ul> <li><a href="#ref-for-scope-proximity">2.5.1. Scoping Styles: the @scope rule</a> <li><a href="#ref-for-scope-proximity①">2.5.3. Selector Scoping Notation</a> <a href="#ref-for-scope-proximity②">(2)</a> <a href="#ref-for-scope-proximity③">(3)</a> <li><a href="#ref-for-scope-proximity④">3.1. Additions Since Level 5</a> </ul> </aside> <aside class="dfn-panel" data-for="origin"> <a href="#origin">#origin</a>Referenced in: <ul> <li><a href="#ref-for-origin">2.1. Cascade Sorting Order</a> <a href="#ref-for-origin①">(2)</a> <a href="#ref-for-origin②">(3)</a> <a href="#ref-for-origin③">(4)</a> <a href="#ref-for-origin④">(5)</a> <a href="#ref-for-origin⑤">(6)</a> </ul> </aside> <aside class="dfn-panel" data-for="important"> <a href="#important">#important</a>Referenced in: <ul> <li><a href="#ref-for-important">2.1. Cascade Sorting Order</a> <a href="#ref-for-important①">(2)</a> <a href="#ref-for-important②">(3)</a> <a href="#ref-for-important③">(4)</a> <a href="#ref-for-important④">(5)</a> <a href="#ref-for-important⑤">(6)</a> <a href="#ref-for-important⑥">(7)</a> <a href="#ref-for-important⑦">(8)</a> <a href="#ref-for-important⑧">(9)</a> <a href="#ref-for-important⑨">(10)</a> </ul> </aside> <aside class="dfn-panel" data-for="normal"> <a href="#normal">#normal</a>Referenced in: <ul> <li><a href="#ref-for-normal">2.1. Cascade Sorting Order</a> <a href="#ref-for-normal①">(2)</a> <a href="#ref-for-normal②">(3)</a> <a href="#ref-for-normal③">(4)</a> <a href="#ref-for-normal④">(5)</a> <a href="#ref-for-normal⑤">(6)</a> <a href="#ref-for-normal⑥">(7)</a> <a href="#ref-for-normal⑦">(8)</a> </ul> </aside> <aside class="dfn-panel" data-for="scope"> <a href="#scope">#scope</a>Referenced in: <ul> <li><a href="#ref-for-scope">2.5. Scoped Styles</a> <a href="#ref-for-scope①">(2)</a> <a href="#ref-for-scope②">(3)</a> <li><a href="#ref-for-scope③">2.5.1. Scoping Styles: the @scope rule</a> <a href="#ref-for-scope④">(2)</a> <li><a href="#ref-for-scope⑤">2.5.3. Selector Scoping Notation</a> <li><a href="#ref-for-scope⑥">3.1. Additions Since Level 5</a> </ul> </aside> <aside class="dfn-panel" data-for="typedef-scope-start"> <a href="#typedef-scope-start">#typedef-scope-start</a>Referenced in: <ul> <li><a href="#ref-for-typedef-scope-start">2.5. Scoped Styles</a> <a href="#ref-for-typedef-scope-start①">(2)</a> <a href="#ref-for-typedef-scope-start②">(3)</a> <li><a href="#ref-for-typedef-scope-start③">2.5.1. Scoping Styles: the @scope rule</a> <a href="#ref-for-typedef-scope-start④">(2)</a> <li><a href="#ref-for-typedef-scope-start⑤">2.5.3. Selector Scoping Notation</a> <a href="#ref-for-typedef-scope-start⑥">(2)</a> <a href="#ref-for-typedef-scope-start⑦">(3)</a> <a href="#ref-for-typedef-scope-start⑧">(4)</a> <li><a href="#ref-for-typedef-scope-start⑨">3.1. Additions Since Level 5</a> </ul> </aside> <aside class="dfn-panel" data-for="typedef-scope-end"> <a href="#typedef-scope-end">#typedef-scope-end</a>Referenced in: <ul> <li><a href="#ref-for-typedef-scope-end">2.5. Scoped Styles</a> <a href="#ref-for-typedef-scope-end①">(2)</a> <li><a href="#ref-for-typedef-scope-end②">2.5.1. Scoping Styles: the @scope rule</a> <li><a href="#ref-for-typedef-scope-end③">2.5.3. Selector Scoping Notation</a> <a href="#ref-for-typedef-scope-end④">(2)</a> <a href="#ref-for-typedef-scope-end⑤">(3)</a> <li><a href="#ref-for-typedef-scope-end⑥">3.1. Additions Since Level 5</a> </ul> </aside> <aside class="dfn-panel" data-for="scoping-limit"> <a href="#scoping-limit">#scoping-limit</a>Referenced in: <ul> <li><a href="#ref-for-scoping-limit">2.5. Scoped Styles</a> <a href="#ref-for-scoping-limit①">(2)</a> <a href="#ref-for-scoping-limit②">(3)</a> <a href="#ref-for-scoping-limit③">(4)</a> <a href="#ref-for-scoping-limit④">(5)</a> <li><a href="#ref-for-scoping-limit⑤">2.5.3. Selector Scoping Notation</a> </ul> </aside> <aside class="dfn-panel" data-for="at-ruledef-scope"> <a href="#at-ruledef-scope">#at-ruledef-scope</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-scope">2.5.1. Scoping Styles: the @scope rule</a> <a href="#ref-for-at-ruledef-scope①">(2)</a> <a href="#ref-for-at-ruledef-scope②">(3)</a> <a href="#ref-for-at-ruledef-scope③">(4)</a> <a href="#ref-for-at-ruledef-scope④">(5)</a> <a href="#ref-for-at-ruledef-scope⑤">(6)</a> <a href="#ref-for-at-ruledef-scope⑥">(7)</a> <li><a href="#ref-for-at-ruledef-scope⑦">2.5.3. Selector Scoping Notation</a> <li><a href="#ref-for-at-ruledef-scope⑧">3.1. Additions Since Level 5</a> </ul> </aside> <aside class="dfn-panel" data-for="scoped-descendant-combinator"> <a href="#scoped-descendant-combinator">#scoped-descendant-combinator</a>Referenced in: <ul> <li><a href="#ref-for-scoped-descendant-combinator">2.5.2. Scoped Descendant Combinator</a> <a href="#ref-for-scoped-descendant-combinator①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="selector-scoping-notation"> <a href="#selector-scoping-notation">#selector-scoping-notation</a>Referenced in: <ul> <li><a href="#ref-for-selector-scoping-notation">2.5.2. Scoped Descendant Combinator</a> <li><a href="#ref-for-selector-scoping-notation①">2.5.3. Selector Scoping Notation</a> <a href="#ref-for-selector-scoping-notation②">(2)</a> <a href="#ref-for-selector-scoping-notation③">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="typedef-selector-scope"> <a href="#typedef-selector-scope">#typedef-selector-scope</a>Referenced in: <ul> <li><a href="#ref-for-typedef-selector-scope">2.5.3. Selector Scoping Notation</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> <script>/* script-mdn-anno */ document.body.addEventListener("click", (e) => { if(e.target.closest(".mdn-anno-btn")) { e.target.closest(".mdn-anno").classList.toggle("wrapped"); } }); </script><a class='fatal' href='/date/2022-03-30T15:24:30/bikeshed/css-cascade-6/' id='generator' title='Bikeshed Errors'><svg height='24' viewbox='0 0 100 100' width='24'><g stroke="blue" stroke-width="6" fill="none"><path fill="blue" stroke="none" d="M 5 95 L 5 35 L 50 10 L 50 95"/><path d="M 1 37 L 54 8"/><path fill="blue" stroke="none" d="M 1 40 v -6 l 60 -32 v 6 z" /><circle cx="75" cy="79" r="15" /><circle fill="blue" stroke="none" cx="75" cy="79" r="4" /><path d="M 75 79 L 65 49 L 55 49" /><path d="M 67 55 L 48 69" /></g></svg></a>