<pre class='metadata'>

Title: CSS Object Model (CSSOM) Module Level 1

ED: https://drafts.csswg.org/cssom/

TR: https://www.w3.org/TR/cssom-1/

Previous Version: https://www.w3.org/TR/2021/WD-cssom-1-20210826/

Previous Version: https://www.w3.org/TR/2016/WD-cssom-1-20160317/

Previous Version: https://www.w3.org/TR/2013/WD-cssom-20131205/

Previous Version: https://www.w3.org/TR/2011/WD-cssom-20110712/

Previous Version: https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/

Group: CSSWG

Status: ED

Prepare for TR: no

Work Status: Exploring

Shortname: cssom

Level: 1

Editor: Daniel Glazman, Disruptive Innovations http://disruptive-innovations.com/, daniel.glazman@disruptive-innovations.com, w3cid 13329

Editor: Emilio Cobos Álvarez 106537, Mozilla, emilio@mozilla.com

Former Editor: Simon Pieters, Opera Software AS http://www.opera.com, simonp@opera.com

Former Editor: Glenn Adams, Cox Communications&#44; Inc. http://www.cox.com, glenn.adams@cos.com, http://www.w3.org/wiki/User:Gadams

Former Editor: Anne van Kesteren, Opera Software ASA http://www.opera.com, annevk@annevk.nl, https://annevankesteren.nl/

!Legacy issues list: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=CSSOM&amp;resolution=---">Bugzilla</a>

Abstract: CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and of course CSS itself.

Repository: w3c/csswg-drafts

Ignored Terms: cssText

Ignored Vars: m1, m2, camel_cased_attribute, webkit_cased_attribute, dashed_attribute

WPT Path Prefix: /css/cssom/

WPT Display: closed

Include Can I Use Panels: true

Can I Use URL: https://drafts.csswg.org/cssom/

Can I Use URL: https://www.w3.org/TR/cssom-1/

Ignore Can I Use URL Failure: https://drafts.csswg.org/cssom/

Ignore Can I Use URL Failure: https://www.w3.org/TR/cssom-1/

Ignore MDN Failure: #dom-cssgroupingrule-selectortext

Ignore MDN Failure: #dom-cssgroupingrule-style

Ignore MDN Failure: #dom-cssstyledeclaration-cssfloat

</pre>

<pre class='anchors'>

urlPrefix: https://html.spec.whatwg.org/multipage/

urlPrefix: infrastructure.html

type: dfn

text: html elements

text: tree order

text: content-type metadata; url: #content-type

urlPrefix: urls-and-fetching.html

type: dfn

text: document base url

urlPrefix: rendering.html

type: dfn

text: being rendered

urlPrefix: browsers.html

type: interface; text: WindowProxy

type: dfn

text: browsing context

text: auxiliary browsing context

text: familiar with

text: same origen

urlPrefix: webappapis.html

type: dfn

text: responsible browsing context

text: incumbent settings object

text: event loop

text: event handlers

text: event handler event type

text: event handler IDL attributes

urlPrefix: infrastructure.html

type: dfn

text: split a string on commas

text: skip whitespace

text: collect a sequence of characters

text: space character

text: rules for parsing integers

urlPrefix: xhtml.html

type: dfn

text: xml parser

urlPrefix: semantics.html

type: dfn

text: a style sheet that is blocking scripts

text: contributes a script-blocking style sheet

for: Document

text: script-blocking style sheet set

urlPrefix: https://dom.spec.whatwg.org/#concept-

type: dfn

text: dispatch; url: event-dispatch

text: event

text: event listener

text: quirks mode; url: document-quirks

text: fire an event; url: event-fire

text: node document

text: document url

urlPrefix: https://www.w3.org/TR/CSS21/visuren.html

type: dfn; text: anonymous block box; url: #anonymous-block-level

urlPrefix: http://heycam.github.io/webidl/#

type: interface; urlPrefix: idl-

text: double

text: long

type: dfn; urlPrefix: dfn-

text: converted to an IDL value

text: throw

text: supported property indices

urlPrefix: https://encoding.spec.whatwg.org/#; spec: ENCODING

type: dfn; text: get an encoding; url: concept-encoding-get

urlPrefix: https://url.spec.whatwg.org/#concept-

type: dfn

text: URL

text: URL parser

text: URL serializer

urlPrefix: https://www.w3.org/TR/xml-stylesheet/#dt-

type: dfn;

text: xml-stylesheet processing instruction; url: xml-stylesheet

type: dfn; text: pseudo-attribute

urlPrefix: https://fetch.spec.whatwg.org/#concept-

type: dfn;

text: fetch

text: request

for: request

text: url; url: request-url

text: origen; url: request-origen

text: referrer; url: request-referrer

text: network error

</pre>

<pre class='link-defaults'>

spec:css-borders-4; type:property;

text:border-top-color

text:border-left-color

text:border-right-color

text:border-bottom-color

text:border-block-start-color

text:border-block-end-color

text:border-inline-start-color

text:border-inline-end-color

text:box-shadow

spec:css-color-4; type:value; text:color

spec:css-display-3; type:value; for:display; text:table

spec:css-fonts-4; type:descriptor;

text:unicode-range

text:font-variant

text:font-feature-settings

text:font-stretch

text:font-weight

text:font-style

spec:css-logical; type:property; text:inline-size

spec:css-namespaces-3; type:dfn; text:namespace prefix

spec:css-position-3; type:property; text:left

spec:css-values-4; type:dfn; text:keyword

spec:css-variables-1; type:dfn; text:custom property

spec:dom;

type:interface;

text:Document

text:DocumentOrShadowRoot

type:dfn; text:in a document tree

spec:html; type:element; text:style

spec:infra; type:dfn; text:list

spec:selectors-3; type:selector;

text:::before

text:::after

</pre>

<style>

main .atrisk::before {

float: right;

margin-top: -0.25em;

padding: 0.5em 1em 0.5em 0;

text-indent: -0.9em;

border: 1px solid;

content: '\25C0 Not yet widely implemented';

white-space: pre;

font-size: small;

background-color: white;

color: gray;

text-align: center;

}

</style>

<script src=https://resources.whatwg.org/file-issue.js async data-file-issue-url="https://github.com/w3c/csswg-drafts/issues/new?title=%5Bcssom%5D%20"></script>

<style>

.selected-text-file-an-issue {

position: fixed;

bottom: 0;

right: 0;

background: rgba(255, 255, 255, 0.8);

font-size: smaller;

padding: 4px 10px;

z-index: 1;

text-decoration: underline;

}

@media (max-width: 767px) {

.selected-text-file-an-issue { left: 0; right: auto; text-align: left; }

}

</style>

Introduction {#introduction}

============================

This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications

as well as other CSS related specifications define extensions to these core features.

The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to

and manipulation of style related state information and processes.

The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily

[[DOM]]. The purposes of the present document are (1) to improve on that prior work by providing

more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented

features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been

or expected to be widely implemented.

<wpt title="Basic CSSOM tests">

idlharness.html

invalid-pseudo-elements.html

historical.html

stylesheet-replacedata-dynamic.html

xml-stylesheet-pi-in-doctype.xhtml

</wpt>

Terminology {#terminology}

==========================

This specification employs certain terminology from the following documents:

<cite>DOM</cite>,

<cite>HTML</cite>,

<cite>CSS Syntax</cite>,

<cite>Encoding</cite>,

<cite>URL</cite>,

<cite>Fetch</cite>,

<cite>Associating Style Sheets with XML documents</cite>

and

<cite>XML</cite>.

[[!DOM]]

[[!HTML]]

[[!CSS3SYN]]

[[!ENCODING]]

[[!URL]]

[[!FETCH]]

[[!XML-STYLESHEET]]

[[!XML]]

When this specification talks about object

<code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface

<code><var>A</var></code>.

The terms <dfn>set</dfn> and <dfn>unset</dfn> to refer to the true and

false values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to

mutating some value to make it true or false, respectively.

The term <dfn export>supported styling language</dfn> refers to CSS.

Note: If another styling language becomes supported in user agents, this specification is expected to be updated as necessary.

The term <dfn export>supported CSS property</dfn> refers to a CSS property that the user agent

implements, including any vendor-prefixed properties, but excluding <a>custom properties</a>. A

<a>supported CSS property</a> must be in its lowercase form for the purpose of comparisons in this

specification.

In this specification the ''::before'' and ''::after'' pseudo-elements

are assumed to exist for all elements even if no box is generated for them.

When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that

e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.

Unless otherwise stated, string comparisons are done in a <a>case-sensitive</a> manner.

Common Serializing Idioms {#common-serializing-idioms}

------------------------------------------------------

To <dfn export>escape a character</dfn> means to create a string of

"<code>\</code>" (U+005C), followed by the character.

To <dfn lt="escape a character as code point|escaped as code point">escape a character as code point</dfn> means to create a

string of "<code>\</code>" (U+005C), followed by the Unicode code point as

the smallest possible number of hexadecimal digits in the range 0-9 a-f

(U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in

base 16, followed by a single SPACE (U+0020).

To <dfn export>serialize an identifier</dfn> means to create a string represented

by the concatenation of, for each character of the identifier:

<ul>

<li>If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).

<li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, then the character

<a>escaped as code point</a>.

<li>If the character is the first character and is in the range \[0-9]

(U+0030 to U+0039), then the character

<a>escaped as code point</a>.

<li>If the character is the second character and is in the range \[0-9]

(U+0030 to U+0039) and the first character is a "<code>-</code>"

(U+002D), then the character

<a>escaped as code point</a>.

<li>If the character is the first character and is a "<code>-</code>" (U+002D),

and there is no second character,

then the <a lt="escape a character">escaped</a> character.

<li>If the character is not handled by one of the above rules and is

greater than or equal to U+0080, is "<code>-</code>" (U+002D) or

"<code>_</code>" (U+005F), or is in one of the ranges \[0-9] (U+0030 to

U+0039), \[A-Z] (U+0041 to U+005A), or \[a-z] (U+0061 to U+007A), then the character

itself.

<li>Otherwise, the <a lt="escape a character">escaped</a>

character.

</ul>

<div algorithm>

To <dfn export for=CSS>serialize a function</dfn> |func|,

returning a [=string=]:

1. Let |s| be an empty [=string=].

2. [=Serialize an identifier=] from |func|'s name,

ASCII lowercased,

and append the result to |s|.

3. Append "(" (U+0028) to |s|.

4. Serialize |func|'s contents,

either as specified by the definition of |func|,

or in the shortest form possible

(akin to the principles captured by [=serialize a CSS value=]).

Append the result to |s|.

5. Append ")" (U+0029) to |s|.

6. Return |s|.

</div>

To <dfn export lt="serialize a string|serialize as a string">serialize a string</dfn> means to create a string represented

by '"' (U+0022), followed by the result of applying the rules

below to each character of the given string, followed by

'"' (U+0022):

<ul>

<li>If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).

<li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, the character

<a>escaped as code point</a>.

<li>If the character is '"' (U+0022) or "<code>\</code>"

(U+005C), the <a lt="escape a character">escaped</a> character.

<li>Otherwise, the character itself.

</ul>

Note: "<code>'</code>" (U+0027) is not escaped because strings

are always serialized with '"' (U+0022).

To <dfn export>serialize a URL</dfn> means to create a string represented by

"<code>url(</code>", followed by the

<a lt="serialize a string">serialization</a> of the URL as a

string, followed by "<code>)</code>".

To <dfn export>serialize a LOCAL</dfn> means to create a string represented by

"<code>local(</code>", followed by the

<a lt="serialize a string">serialization</a> of the LOCAL as a

string, followed by "<code>)</code>".

To <dfn export>serialize a comma-separated list</dfn> concatenate all items of

the list in list order while separating them by "<code>, </code>", i.e.,

COMMA (U+002C) followed by a single SPACE (U+0020).

To <dfn export>serialize a whitespace-separated list</dfn> concatenate all

items of the list in list order while separating them by "<code> </code>", i.e.,

a single SPACE (U+0020).

Note: When serializing a list according to the above rules,

extraneous whitespace is not inserted prior to the first item or subsequent to

the last item. Unless otherwise specified, an empty list is serialized as the

empty string.

CSSOMString {#cssomstring-type}

===============================

Most strings in CSSOM interfaces use the <dfn interface>CSSOMString</dfn> type.

Each implementation chooses to define it as either {{USVString}} or {{DOMString}}:

<pre class="def lang-webidl">

typedef USVString CSSOMString;

</pre>

Or, alternatively:

<pre class="def lang-webidl">

typedef DOMString CSSOMString;

</pre>

<div class=note>

The difference is only observable from web content

when <a>surrogate</a> code units are involved.

{{DOMString}} would preserve them,

whereas {{USVString}} would replace them with U+FFFD REPLACEMENT CHARACTER.

This choice effectively allows implementations to do this replacement,

but does not require it.

Using {{USVString}} enables an implementation

to use UTF-8 internally to represent strings in memory.

Since well-formed UTF-8 specifically disallows <a>surrogate</a> code points,

it effectively requires this replacement.

On the other hand,

implementations that internally represent strings as 16-bit <a>code units</a>

might prefer to avoid the cost of doing this replacement.

</div>

Media Queries {#media-queries}

==============================

[=Media queries=] are defined by [[!MEDIAQUERIES]]. This

section defines various concepts around [=media queries=], including their API

and serialization form.

Parsing Media Queries {#parsing-media-queries}

----------------------------------------------

To <dfn export>parse a media query list</dfn> for a

given string <var>s</var> into a [=media query list=] is defined in

the Media Queries specification. Return the list of media

queries that the algorithm defined there gives. <!-- XXX ref -->

Note: A media query that ends up being "ignored" will turn

into "<code>not all</code>".

To <dfn export>parse a media query</dfn> for a given string

<var>s</var> means to follow the

<a>parse a media query list</a> steps and return null if more

than one media query is returned or a media query if a

single media query is returned.

Note: Again, a media query that ends up being "ignored" will

turn into "<code>not all</code>".

Serializing Media Queries {#serializing-media-queries}

------------------------------------------------------

To

<dfn export>serialize a media query list</dfn>

run these steps:

<ol>

<li>If the [=media query list=] is empty, then return the empty string.

<li><a lt="serialize a media query">Serialize</a> each media query in the list of media queries, in the same order as they appear in the [=media query list=], and then <a lt="serialize a comma-separated list">serialize</a> the list.

</ol>

To

<dfn export>serialize a media query</dfn> let

<var>s</var> be the empty string, run the steps below:

<ol>

<li>If the [=media query=] is negated append "<code>not</code>", followed

by a single SPACE (U+0020), to <var>s</var>.

<li>Let <var>type</var> be the <a lt="serialize an identifier">serialization

as an identifier</a> of the [=media type=] of the [=media query=],

<a lt="ASCII lowercase">converted to ASCII lowercase</a>.

<li>If the [=media query=] does not contain [=media features=] append

<var>type</var>, to <var>s</var>,

then return <var>s</var>.

<li>If <var>type</var> is not "<code>all</code>" or if the

media query is negated append <var>type</var>, followed by a

single SPACE (U+0020), followed by "<code>and</code>", followed by a single SPACE

(U+0020), to <var>s</var>.

<li>

Then, for each [=media feature=]:

<ol>

<li>Append a "<code>(</code>" (U+0028), followed by the [=media feature=]

name, <a lt="ASCII lowercase">converted to ASCII lowercase</a>,

to <var>s</var>.

<li>If a value is given append a "<code>:</code>" (U+003A), followed

by a single SPACE (U+0020), followed by the

<a lt="serialize a media feature value">serialized media feature value</a>,

to <var>s</var>.

<li>Append a "<code>)</code>" (U+0029) to

<var>s</var>.

<li>If this is not the last [=media feature=] append a single SPACE (U+0020),

followed by "<code>and</code>", followed by a single SPACE (U+0020), to

<var>s</var>.

</ol>

<li>Return <var>s</var>.

</ol>

<div class="example">

Here are some examples of input (first column) and output (second

column):

<table class="complex data">

<thead>

<tr><th>Input<th>Output

<tbody>

<tr>

<td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>

<td><pre>not screen and (min-width: 5px) and (max-width: 40px)</pre>

<tr>

<td><pre>all and (color) and (color)</pre>

<td><pre>(color) and (color)</pre>

</table>

</div>

<wpt>

mediaquery-sort-dedup.html

</wpt>

### Serializing Media Feature Values ### {#serializing-media-feature-values}

Issue: This should probably be done in terms of mapping it to

serializing CSS values as media features are defined in terms of CSS

values after all.

To <dfn export>serialize a media feature value</dfn>

named <var>v</var> locate <var>v</var> in the first

column of the table below and use the serialization format described in

the second column:

<table class="complex data">

<thead>

<tr>

<th>Media Feature

<th>Serialization

<tbody>

<tr>

<td>'@media/width!!descriptor'

<td>...

<tr>

<td>'@media/height!!descriptor'

<td>...

<tr>

<td>'@media/device-width!!descriptor'

<td>...

<tr>

<td>'@media/device-height!!descriptor'

<td>...

<tr>

<td>'@media/orientation!!descriptor'

<td>

If the value is ''orientation/portrait'': "<code>portrait</code>".

If the value is ''orientation/landscape'': "<code>landscape</code>".

<tr>

<td>'@media/aspect-ratio!!descriptor'

<td>...

<tr>

<td>'@media/device-aspect-ratio!!descriptor'

<td>...

<tr>

<td>'@media/color!!descriptor'

<td>...

<tr>

<td>'@media/color-index!!descriptor'

<td>...

<tr>

<td>'@media/monochrome!!descriptor'

<td>...

<tr>

<td>'@media/resolution!!descriptor'

<td>...

<tr>

<td>'@media/scan!!descriptor'

<td>

If the value is ''scan/progressive'': "<code>progressive</code>".

If the value is ''scan/interlace'': "<code>interlace</code>".

<tr>

<td>'@media/grid!!descriptor'

<td>...

</table>

Other specifications can extend this table and vendor-prefixed media

features can have custom serialization formats as well.

Comparing Media Queries {#comparing-media-queries}

--------------------------------------------------

To

<dfn export>compare media queries</dfn>

<var>m1</var> and <var>m2</var> means to

<a lt="serialize a media query">serialize</a> them both and

return true if they are a

<a>case-sensitive</a> match and false if they

are not.

The {{MediaList}} Interface {#the-medialist-interface}

------------------------------------------------------

An object that implements the <code>MediaList</code> interface has an associated <dfn export for=MediaList>collection of media queries</dfn>.

<pre class=idl>

[Exposed=Window]

interface MediaList {

stringifier attribute [LegacyNullToEmptyString] CSSOMString mediaText;

readonly attribute unsigned long length;

getter CSSOMString? item(unsigned long index);

undefined appendMedium(CSSOMString medium);

undefined deleteMedium(CSSOMString medium);

};

</pre>

The object's <a>supported property indices</a> are the numbers in the range zero to one less than the number of media queries

in the <a>collection of media queries</a> represented by the collection. If there are no such media queries, then there are no

<a>supported property indices</a>.

<wpt>

medialist-dynamic-001.html

medialist-interfaces-001.html

medialist-interfaces-002.html

medialist-interfaces-004.html

MediaList.html

MediaList2.xhtml

</wpt>

To <dfn export>create a <code>MediaList</code> object</dfn> with a string <var>text</var>, run the following steps:

<ol>

<li>Create a new <code>MediaList</code> object.

<li>Set its {{MediaList/mediaText}} attribute to <var>text</var>.

<li>Return the newly created <code>MediaList</code> object.

</ol>

The <dfn attribute for=MediaList>mediaText</dfn> attribute, on getting, must return a

<a lt="serialize a media query list">serialization</a> of the <a>collection of media queries</a>.

Setting the {{MediaList/mediaText}} attribute must run these steps:

<ol>

<li>Empty the <a>collection of media queries</a>.

<li>If the given value is the empty string, then return.

<li>Append all the media queries as a result of <a lt="parse a media query list">parsing</a> the given

value to the <a>collection of media queries</a>.

</ol>

The <dfn method for=MediaList>item(<var>index</var>)</dfn> method must return a

<a lt="serialize a media query">serialization</a> of the media query in the <a>collection of media queries</a>

given by <var>index</var>, or null, if <var>index</var> is greater than or equal to the number of media queries

in the <a>collection of media queries</a>.

The <dfn attribute for=MediaList>length</dfn> attribute must return the number of media queries in the <a>collection of media

queries</a>.

The <dfn method for=MediaList>appendMedium(<var>medium</var>)</dfn> method must run these steps:

<ol>

<li>Let <var>m</var> be the result of <a lt="parse a media query">parsing</a> the given value.

<li>If <var>m</var> is null, then return.

<li>If <a lt="compare media queries">comparing</a> <var>m</var> with any of the media queries in the

<a>collection of media queries</a> returns true, then return.

<li>Append <var>m</var> to the <a>collection of media queries</a>.

</ol>

The <dfn method for=MediaList>deleteMedium(<var>medium</var>)</dfn> method must run these steps:

<ol>

<li>Let <var>m</var> be the result of <a lt="parse a media query">parsing</a> the given value.

<li>If <var>m</var> is null, then return.

<li>Remove any media query from the <a>collection of media queries</a> for which

<a lt="compare media queries">comparing</a> the media query with <var>m</var> returns true.

If nothing was removed, then <a>throw</a> a {{NotFoundError}} exception.

</ol>

Selectors {#selectors}

======================

Selectors are defined in the Selectors specification. This section

mainly defines how to serialize them. <!-- XXX ref -->

<!-- XXX ref universal selector etc? some are in A some not -->

Parsing Selectors {#parsing-selectors}

--------------------------------------

To

<dfn export>parse a group of selectors</dfn>

means to parse the value using the <code>selectors_group</code>

production defined in the Selectors specification and return either a

group of selectors if parsing did not fail or null if parsing did

fail. <!-- XXX ref -->

Serializing Selectors {#serializing-selectors}

----------------------------------------------

<!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->

To

<dfn export>serialize a group of selectors</dfn>

<a lt="serialize a selector">serialize</a> each selector in the

group of selectors and then

<a lt="serialize a comma-separated list">serialize</a> a

comma-separated list of these serializations.

To <dfn export>serialize a selector</dfn> let

<var>s</var> be the empty string, run the steps below for each

part of the chain of the selector, and finally return

<var>s</var>:

<ol>

<li>If there is only one <a>simple selector</a> in the

<a>compound selectors</a> which is a

<a>universal selector</a>, append the result of

<a lt="serialize a simple selector">serializing</a> the

<a>universal selector</a> to <var>s</var>.

<li>Otherwise, for each <a>simple selector</a> in the

<a>compound selectors</a> that is not a

universal selector of which the

<a>namespace prefix</a> maps to a namespace that is not the

<a>default namespace</a>

<a lt="serialize a simple selector">serialize</a> the

<a>simple selector</a> and append the result to

<var>s</var>.

<li>If this is not the last part of the chain of the selector append a

single SPACE (U+0020), followed by the combinator

"<code>></code>",

"<code>+</code>",

"<code>~</code>",

"<code>>></code>",

"<code>||</code>",

as appropriate, followed by another single SPACE (U+0020) if the combinator was

not whitespace, to <var>s</var>.

<li>If this is the last part of the chain of the selector and there is

a pseudo-element, append "<code>::</code>" followed by the name of the

pseudo-element, to <var>s</var>.

</ol>

<wpt>

selectorSerialize.html

serialize-namespaced-type-selectors.html

</wpt>

To

<dfn export>serialize a simple selector</dfn>

let <var>s</var> be the empty string, run the steps below, and

finally return <var>s</var>:

<dl class="switch">

<dt>type selector

<dt>universal selector

<dd>

<ol>

<li>If the <a>namespace prefix</a> maps to a namespace that is

not the <a>default namespace</a> and is not the

null namespace (not in a namespace) append the

<a lt="serialize an identifier">serialization</a> of the

<a>namespace prefix</a> as an identifier, followed by a

"<code>|</code>" (U+007C) to <var>s</var>.

<li>If the <a>namespace prefix</a> maps to a namespace that is

the null namespace (not in a namespace) append

"<code>|</code>" (U+007C) to <var>s</var>.

<!-- This includes |* -->

<li>If this is a type selector append the

<a lt="serialize an identifier">serialization</a> of the element name

as an identifier to <var>s</var>.

<li>If this is a universal selector append "<code>*</code>" (U+002A)

to <var>s</var>.

</ol>

<dt>attribute selector

<dd>

<ol>

<li>Append "<code>[</code>" (U+005B) to

<var>s</var>.

<li>If the <a>namespace prefix</a> maps to a namespace that is

not the null namespace (not in a namespace) append the

<a lt="serialize an identifier">serialization</a> of the

<a>namespace prefix</a> as an identifier, followed by a

"<code>|</code>" (U+007C) to <var>s</var>.

<li>Append the <a lt="serialize an identifier">serialization</a>

of the attribute name as an identifier to <var>s</var>.

<li>If there is an attribute value specified, append

"<code>=</code>",

"<code>~=</code>",

"<code>|=</code>",

"<code>^=</code>",

"<code>$=</code>", or

"<code>*=</code>"

as appropriate (depending on the type of attribute selector), followed

by the <a lt="serialize a string">serialization</a> of the

attribute value as a string, to <var>s</var>.

<li>If the attribute selector has the case-sensitivity flag present,

append "<code> i</code>" (U+0020 U+0069) to <var>s</var>.

<li>Append "<code>]</code>" (U+005D) to

<var>s</var>.

</ol>

<dt>class selector

<dd>Append a "<code>.</code>" (U+002E), followed by the

<a lt="serialize an identifier">serialization</a> of the class name

as an identifier to <var>s</var>.

<dt>ID selector

<dd>Append a "<code>#</code>" (U+0023), followed by the

<a lt="serialize an identifier">serialization</a> of the ID

as an identifier to <var>s</var>.

<dt>pseudo-class

<dd>

If the pseudo-class does not accept arguments append

"<code>:</code>" (U+003A), followed by the name of the pseudo-class, to

<var>s</var>.

Otherwise, append "<code>:</code>" (U+003A), followed by the name of

the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the

value of the pseudo-class argument(s) determined as per below, followed by

"<code>)</code>" (U+0029), to <var>s</var>.

<dl class="switch">

<dt><code>:lang()</code>

<dd>The <a lt="serialize a comma-separated list">serialization of a

comma-separated list</a> of each argument's

<a lt="serialize a string">serialization as a string</a>, preserving

relative order.

<dt><code>:nth-child()</code>

<dt><code>:nth-last-child()</code>

<dt><code>:nth-of-type()</code>

<dt><code>:nth-last-of-type()</code>

<dd>The result of serializing the value using the rules to <a>serialize an &lt;an+b> value</a>.

<dt><code>:not()</code>

<dd>The result of serializing the value using the rules for

<a lt="serialize a group of selectors">serializing a group of selectors</a>.

</dl>

</dl>

CSS {#css-object-model}

=======================

CSS Style Sheets {#css-style-sheets}

------------------------------------

A <dfn export>CSS style sheet</dfn> is an abstract concept that

represents a style sheet as defined by the CSS specification. In the CSSOM a

<a>CSS style sheet</a> is represented as a {{CSSStyleSheet}} object.

<dl>

<dt><dfn constructor for=CSSStyleSheet>CSSStyleSheet(<var>options</var>)</dfn></dt>

<dd>

When called, execute the steps to <a>create a constructed CSSStyleSheet</a> given <var>options</var> and return the result.

</dd>

<dt>To <dfn export>create a constructed {{/CSSStyleSheet}}</dfn></dt> given {{CSSStyleSheetInit}} <var>options</var>, run these steps:

<dd>

<ol>

<li>Construct a new {{/CSSStyleSheet}} object <var>sheet</var>.</li>

<li>Set <var>sheet</var>'s <a spec=cssom>location</a> to the <a spec=html for=/>base URL</a> of the <a>associated Document</a> for the <a>current global object</a>.

<li>Set <var>sheet</var>'s <a>stylesheet base URL</a> to the {{CSSStyleSheetInit/baseURL}} attribute value from <var>options</var>.

<li>Set <var>sheet</var>'s [=CSSStyleSheet/parent CSS style sheet=] to null.

<li>Set <var>sheet</var>'s [=CSSStyleSheet/owner node=] to null.

<li>Set <var>sheet</var>'s [=CSSStyleSheet/owner CSS rule=] to null.

<li>Set <var>sheet</var>'s [=CSSStyleSheet/title=] to the empty string.

<li>Unset <var>sheet</var>'s [=CSSStyleSheet/alternate flag=].

<li>Set <var>sheet</var>'s [=CSSStyleSheet/origen-clean flag=].

<li>Set <var>sheet</var>'s [=CSSStyleSheet/constructed flag=].

<li>Set <var>sheet</var>'s [=CSSStyleSheet/Constructor document=] to the <a>associated Document</a> for the <a>current global object</a>.

<li>If the {{CSSStyleSheetInit/media}} attribute of <var>options</var> is a string,

<a>create a MediaList object</a> from the string

and assign it as <var>sheet</var>'s [=CSSStyleSheet/media=].

Otherwise, <a>serialize a media query list</a> from the attribute and then <a>create a MediaList object</a>

from the resulting string and set it as <var>sheet</var>'s [=CSSStyleSheet/media=].

<li>If the {{CSSStyleSheetInit/disabled}} attribute of <var>options</var> is true,

set <var>sheet</var>'s [=CSSStyleSheet/disabled flag=].

<li>Return <var>sheet</var>.

</ol>

</dd>

</dl>

<wpt>

CSSStyleSheet-constructable-baseURL.html

CSSStyleSheet-constructable-concat.html

CSSStyleSheet-constructable-cssRules.html

CSSStyleSheet-constructable-disabled-regular-sheet-insertion.html

CSSStyleSheet-constructable-disallow-import.tentative.html

CSSStyleSheet-constructable-duplicate.html

CSSStyleSheet-constructable-insertRule-base-uri.html

CSSStyleSheet-constructable-invalidation.html

CSSStyleSheet-constructable-replace-cssRules.html

CSSStyleSheet-constructable-replace-on-regular-sheet.html

CSSStyleSheet-constructable.html

CSSStyleSheet-modify-after-removal.html

CSSStyleSheet-template-adoption.html

CSSStyleSheet.html

style-sheet-interfaces-001.html

style-sheet-interfaces-002.html

</wpt>

A <a>CSS style sheet</a> has a number of associated state items:

<dl dfn-for="CSSStyleSheet">

<dt><dfn id=concept-css-style-sheet-type>type</dfn>

<dd>The literal string "<code>text/css</code>".

<dt><dfn id=concept-css-style-sheet-location>location</dfn>

<dd>Specified when created. The <a>absolute-URL string</a> of the first request of the

<a>CSS style sheet</a> or null if the <a>CSS style sheet</a> was

embedded. Does not change during the lifetime of the <a>CSS style sheet</a>.

<dt><dfn id=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</dfn>

<dd>Specified when created. The <a>CSS style sheet</a> that is the parent of the

<a>CSS style sheet</a> or null if there is no associated parent.

<dt><dfn id=concept-css-style-sheet-owner-node>owner node</dfn>

<dd>Specified when created. The DOM node associated with the <a>CSS style sheet</a> or

null if there is no associated DOM node.

<dt><dfn id=concept-css-style-sheet-owner-css-rule>owner CSS rule</dfn>

<dd>Specified when created. The <a for=/>CSS rule</a>

in the <a for=CSSStyleSheet>parent CSS style sheet</a>

that caused the inclusion of the <a>CSS style sheet</a> or null if

there is no associated rule.

<dt><dfn id=concept-css-style-sheet-media>media</dfn>

<dd>

Specified when created. The {{MediaList}} object associated with the

<a>CSS style sheet</a>.

If this property is specified to a string, the [=CSSStyleSheet/media=] must be set to the return value of invoking

<a>create a <code>MediaList</code> object</a> steps for that string.

If this property is specified to an attribute of the <a for=CSSStyleSheet>owner node</a>, the

[=CSSStyleSheet/media=] must be set to the return value of invoking <a>create a <code>MediaList</code> object</a> steps

for the value of that attribute. Whenever the attribute is set, changed or removed, the [=CSSStyleSheet/media=]'s

{{MediaList/mediaText}} attribute must be set to the new value of the attribute, or to null if the attribute is absent.

Note: Changing the [=CSSStyleSheet/media=]'s {{MediaList/mediaText}} attribute does not

change the corresponding attribute on the <a for=CSSStyleSheet>owner node</a>.

Note: The <a for=CSSStyleSheet>owner node</a> of a <a>CSS style sheet</a>, if non-null, is the node whose <a>associated

CSS style sheet</a> is the <a>CSS style sheet</a> in question, when the <a>CSS style sheet</a> is <a

lt="add a CSS style sheet">added</a>.

<dt><dfn id=concept-css-style-sheet-title>title</dfn>

<dd>

Specified when created. The title of the <a>CSS style sheet</a>, which can be the empty string.

<div class="example">

In the following, the <a>title</a> is non-empty

for the first style sheet, but is empty for the second and third style sheets.

<pre>

&lt;style title="papaya whip">

body { background: #ffefd5; }

&lt;/style>

</pre>

<pre>

&lt;style title="">

body { background: orange; }

&lt;/style>

</pre>

<pre>

&lt;style>

body { background: brown; }

&lt;/style>

</pre>

</div>

If this property is specified to an attribute of the <a for=CSSStyleSheet>owner node</a>, the

<a>title</a> must be set to the value of that attribute. Whenever the attribute is set, changed or removed, the

<a>title</a> must be set to the new value of the attribute, or to the empty string if the attribute is absent.

Note: HTML only <a href="https://html.spec.whatwg.org/#the-style-element:concept-css-style-sheet-title">specifies</a>

<a>title</a> to be an attribute of the <a for=CSSStyleSheet>owner node</a>

if the node is in <a>in a document tree</a>.

<dt><dfn id=concept-css-style-sheet-alternate-flag>alternate flag</dfn>

<dd>

Specified when created. Either set or unset. Unset by default.

<div class="example">

The following <a>CSS style sheets</a> have

their <a>alternate flag</a> set:

<pre>&lt;?xml-stylesheet alternate="yes" title="x" href="data:text/css,&hellip;"?></pre>

<pre>&lt;link rel="alternate stylesheet" title="x" href="data:text/css,&hellip;"></pre>

</div>

<dt><dfn id=concept-css-style-sheet-disabled-flag>disabled flag</dfn>

<dd>

Either set or unset. Unset by default.

Note: Even when unset it does not necessarily mean that the

<a>CSS style sheet</a> is actually used for rendering.