8000 csswg-drafts/selectors3/Overview.html at a7b552f9f7e9d03bf779f709cd45aafa340da2f0 · simonwuelker/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
3445 lines (2583 loc) · 126 KB

Overview.html

File metadata and controls

3445 lines (2583 loc) · 126 KB
<p><dfn id=combinators0>Combinators</dfn> are: whitespace,
&quot;greater-than sign&quot; (U+003E, <code>&gt;</code>), &quot;plus
sign&quot; (U+002B, <code>+</code>) and &quot;tilde&quot; (U+007E,
<code>~</code>). White space may appear between a combinator and the
simple selectors around it. <a name=whitespace></a>Only the characters
"space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return"
(U+000D), and "form feed" (U+000C) can occur in whitespace. Other
space-like characters, such as "em-space" (U+2003) and "ideographic space"
(U+3000), are never part of whitespace.
<p>The elements of a document tree that are represented by a selector are
the <dfn id=subjects-of-the-selector><a name=subject></a>subjects of the
selector</dfn>. A selector consisting of a single sequence of simple
selectors represents any element satisfying its requirements. Prepending
another sequence of simple selectors and a combinator to a sequence
imposes additional matching constraints, so the subjects of a selector are
always a subset of the elements represented by the last sequence of simple
selectors.
<p>An empty selector, containing no sequence of simple selectors and no
pseudo-element, is an <a href="#Conformance">invalid selector</a>.
<p>Characters in Selectors can be escaped with a backslash according to the
same <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">escaping
rules</a> as CSS. <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<p id=nsdecl>Certain selectors support namespace prefixes. The mechanism by
which namespace prefixes are <dfn id=declared>declared</dfn> should be
specified by the language that uses Selectors. If the language does not
specify a namespace prefix declaration mechanism, then no prefixes are
declared. In CSS, namespace prefixes are declared with the <a
href="http://www.w3.org/TR/css3-namespace/#declaration"><code>@namespace</code></a>
rule. <a href="#CSS3NAMESPACE"
rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>
<h2 id=grouping><span class=secno>5. </span>Groups of selectors</h2>
<p>A comma-separated list of selectors represents the union of all elements
selected by each of the individual selectors in the list. (A comma is
U+002C.) For example, in CSS when several selectors share the same
declarations, they may be grouped into a comma-separated list. White space
may appear before and/or after the comma.
<div class=example>
<p>CSS example:</p>
<p>In this example, we condense three rules with identical declarations
into one. Thus,</p>
<pre>h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }</pre>
<p>is equivalent to:</p>
<pre>h1, h2, h3 { font-family: sans-serif }</pre>
</div>
<p><strong>Warning</strong>: the equivalence is true in this example
because all the selectors are valid selectors. If just one of these
selectors were invalid, the entire group of selectors would be invalid.
This would invalidate the rule for all three heading elements, whereas in
the former case only one of the three individual heading rules would be
invalidated.
<div class=example>
<p>Invalid CSS example:</p>
<pre>h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }</pre>
<p>is not equivalent to:</p>
<pre>h1, h2..foo, h3 { font-family: sans-serif }</pre>
<p>because the above selector (<code>h1, h2..foo, h3</code>) is entirely
invalid and the entire style rule is dropped. (When the selectors are not
grouped, only the rule for <code>h2..foo</code> is dropped.)</p>
</div>
<h2 id=simple-selectors><span class=secno>6. </span>Simple selectors</h2>
<h3 id=type-selectors><span class=secno>6.1. </span>Type selector</h3>
<p>A <dfn id=type-selector>type selector</dfn> is the name of a document
language element type written using the syntax of <a
href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
names</a> <a href="#CSS3NAMESPACE"
rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>. A type
selector represents an instance of the element type in the document tree.
<div class=example>
<p>Example:</p>
<p>The following selector represents an <code>h1</code> element in the
document tree:</p>
<pre>h1</pre>
View remainder of file in raw view