Selectors
"; ret += " ."; ret += "W3C Working Draft 15 December 2005
"; ret += "- ";
ret += "
- This version: "; ret += "
- "; ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215 "; ret += "
- Latest version:"; ret += "
- "; ret += " http://www.w3.org/TR/css3-selectors"; ret += "
- Previous version:"; ret += "
- "; ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113"; ret += "
- Editors:"; ret += "
- Daniel Glazman (Invited"; ret += " "; ret += "
- Tantek Çelik"; ret += "
- Ian"; ret += " Hickson (Google)"; ret += "
- Peter Linss (former"; ret += " editor, Netscape/AOL)"; ret += "
- John Williams (former editor, Quark, Inc.)"; ret += "
"; ret += " Copyright © 2005 W3C®"; ret += " (MIT, ERCIM, Keio), All Rights Reserved."; ret += " liability,"; ret += " trademark,"; ret += " document"; ret += " use rules apply."; ret += "
"; ret += "
Abstract
"; ret += "Selectors are patterns that match against elements in a"; ret += " tree. Selectors have been optimized for use with HTML and XML, and"; ret += " are designed to be usable in performance-critical code.
"; ret += "CSS (Cascading"; ret += " Style Sheets) is a language for describing the rendering of HTML and XML documents on"; ret += " screen, on paper, in speech, etc. CSS uses Selectors for binding"; ret += " describes extensions to the selectors defined in CSS level 2. These"; ret += " extended selectors will be used by CSS level 3."; ret += "
Selectors define the following function:
"; ret += "expression ∗ element → boolean"; ret += "
That is, given an element and a selector, this specification"; ret += " defines whether that element matches the selector.
"; ret += "These expressions can also be used, for instance, to select a set"; ret += " subtree. STTS (Simple Tree Transformation Sheets), a"; ret += " language for transforming XML trees, uses this mechanism. [STTS]
"; ret += "Status of this document
"; ret += "This section describes the status of this document at the"; ret += " of this technical report can be found in the W3C technical reports index at"; ret += " http://www.w3.org/TR/.
"; ret += "This document describes the selectors that already exist in CSS1 and CSS2, and"; ret += " also proposes new selectors for CSS3 and other languages that may need them.
"; ret += "The CSS Working Group doesn't expect that all implementations of"; ret += " CSS3 will have to implement all selectors. Instead, there will"; ret += " will include all of the selectors.
"; ret += "This specification is a last call working draft for the the CSS Working Group"; ret += " (Style Activity). This"; ret += " document is a revision of the Candidate"; ret += " Recommendation dated 2001 November 13, and has incorporated"; ret += " be demonstrable.
"; ret += "All persons are encouraged to review and implement this"; ret += " specification and return comments to the (archived)"; ret += " public mailing list www-style"; ret += " (see instructions). W3C"; ret += " The deadline for comments is 14 January 2006.
"; ret += "This is still a draft document and may be updated, replaced, or"; ret += "
This document may be available in translation."; ret += "
Table of contents
"; ret += "- ";
ret += "
- 1. Introduction";
ret += "
- ";
ret += "
- 1.1. Dependencies "; ret += "
- 1.2. Terminology "; ret += "
- 1.3. Changes from CSS2 "; ret += "
- 2. Selectors"; ret += "
- 3. Case sensitivity"; ret += "
- 4. Selector syntax"; ret += "
- 5. Groups of selectors"; ret += "
- 6. Simple selectors";
ret += "
- ";
ret += "
- 6.1. Type";
ret += " selectors";
ret += "
- ";
ret += "
- 6.1.1. Type"; ret += " selectors and namespaces "; ret += "
- 6.2.";
ret += " Universal selector";
ret += "
- ";
ret += "
- 6.2.1. Universal selector and"; ret += " namespaces "; ret += "
- 6.3.";
ret += " Attribute selectors";
ret += "
- ";
ret += "
- 6.3.1."; ret += " values"; ret += "
- 6.3.2. Substring"; ret += " matching attribute selectors"; ret += "
- 6.3.3."; ret += " Attribute selectors and namespaces"; ret += "
- 6.3.4."; ret += " Default attribute values in DTDs "; ret += "
- 6.4. Class"; ret += " selectors"; ret += "
- 6.5. ID"; ret += " selectors"; ret += "
- 6.6.";
ret += " Pseudo-classes";
ret += "
- ";
ret += "
- 6.6.1."; ret += " Dynamic pseudo-classes"; ret += "
- 6.6.2. The"; ret += " :target pseudo-class"; ret += "
- 6.6.3. The"; ret += " :lang() pseudo-class"; ret += "
- 6.6.4. UI"; ret += " element states pseudo-classes"; ret += "
- 6.6.5.";
ret += " Structural pseudo-classes";
ret += "
- ";
ret += "
- :root"; ret += " pseudo-class"; ret += "
- :nth-child()"; ret += " pseudo-class"; ret += "
- :nth-last-child()"; ret += "
- :nth-of-type()"; ret += " pseudo-class"; ret += "
- :nth-last-of-type()"; ret += "
- :first-child"; ret += " pseudo-class"; ret += "
- :last-child"; ret += " pseudo-class"; ret += "
- :first-of-type"; ret += " pseudo-class"; ret += "
- :last-of-type"; ret += " pseudo-class"; ret += "
- :only-child"; ret += " pseudo-class"; ret += "
- :only-of-type"; ret += " pseudo-class"; ret += "
- :empty"; ret += " pseudo-class "; ret += "
- 6.6.7. The"; ret += " negation pseudo-class "; ret += "
";
ret += "
- 6.1. Type";
ret += " selectors";
ret += "
- 7. Pseudo-elements";
ret += "
- ";
ret += "
- 7.1. The ::first-line"; ret += " pseudo-element"; ret += "
- 7.2. The ::first-letter"; ret += " pseudo-element"; ret += "
- 7.3. The ::selection"; ret += " pseudo-element"; ret += "
- 7.4. The ::before and ::after"; ret += " pseudo-elements "; ret += "
- 8. Combinators";
ret += "
- ";
ret += "
- 8.1."; ret += " Descendant combinators"; ret += "
- 8.2. Child"; ret += " combinators"; ret += "
- 8.3. Sibling";
ret += " combinators";
ret += "
- ";
ret += "
- 8.3.1."; ret += " Adjacent sibling combinator"; ret += "
- 8.3.2."; ret += " General sibling combinator "; ret += "
";
ret += "
- 9. Calculating a selector's"; ret += " specificity"; ret += "
- 10. The grammar of";
ret += " Selectors";
ret += "
- ";
ret += "
- 10.1. Grammar"; ret += "
- 10.2. Lexical scanner"; ret += " "; ret += "
- 11. Namespaces and down-level"; ret += " clients"; ret += "
- 12. Profiles"; ret += "
- 13. Conformance and requirements"; ret += "
- 14. Tests"; ret += "
- 15. Acknowledgements"; ret += "
- 16. References"; ret += "
1. Introduction
"; ret += "1.1. Dependencies
"; ret += "Some features of this specification are specific to CSS, or have"; ret += " specification, these have been described in terms of CSS2.1. [CSS21]
"; ret += "1.2. Terminology
"; ret += "All of the text of this specification is normative except"; ret += " non-normative.
"; ret += "1.3. Changes from CSS2
"; ret += "This section is non-normative.
"; ret += "The main differences between the selectors in CSS2 and those in"; ret += " Selectors are:"; ret += "
- ";
ret += "
- the list of basic definitions (selector, group of selectors,"; ret += " of simple selectors, and the term 'simple selector' is now used for"; ret += " "; ret += "
- an optional namespace component is now allowed in type element"; ret += " selectors, the universal selector and attribute selectors"; ret += " "; ret += "
- a new combinator has been"; ret += " "; ret += "
- new simple selectors including substring matching attribute"; ret += " selectors, and new pseudo-classes"; ret += " "; ret += "
- new pseudo-elements, and introduction of the '::' convention"; ret += " "; ret += "
- the grammar has been rewritten "; ret += "
- profiles to be added to specifications integrating Selectors"; ret += " and defining the set of selectors which is actually supported by"; ret += " "; ret += "
- Selectors are now a CSS3 Module and an independent"; ret += " "; ret += "
- the specification now has its own test suite "; ret += "
2. Selectors
"; ret += "This section is non-normative, as it merely summarizes the"; ret += " following sections.
"; ret += "A Selector represents a structure. This structure can be used as a"; ret += " HTML or XML fragment corresponding to that structure.
"; ret += "Selectors may range from simple element names to rich contextual"; ret += " representations.
"; ret += "The following table summarizes the Selector syntax:
"; ret += "| Pattern | "; ret += "Meaning | "; ret += "Described in section | "; ret += "First defined in CSS level | "; ret += "
|---|---|---|---|
| * | "; ret += "any element | "; ret += "Universal"; ret += " selector | "; ret += "2 | "; ret += "
| E | "; ret += "an element of type E | "; ret += "Type selector | "; ret += "1 | "; ret += "
| E[foo] | "; ret += "an E element with a 'foo' attribute | "; ret += "Attribute"; ret += " selectors | "; ret += "2 | "; ret += "
| E[foo='bar'] | "; ret += "an E element whose 'foo' attribute value is exactly"; ret += " | "; ret += "Attribute"; ret += " selectors | "; ret += "2 | "; ret += "
| E[foo~='bar'] | "; ret += "an E element whose 'foo' attribute value is a list of"; ret += " | "; ret += "Attribute"; ret += " selectors | "; ret += "2 | "; ret += "
| E[foo^='bar'] | "; ret += "an E element whose 'foo' attribute value begins exactly"; ret += " | "; ret += "Attribute"; ret += " selectors | "; ret += "3 | "; ret += "
| E[foo$='bar'] | "; ret += "an E element whose 'foo' attribute value ends exactly"; ret += " | "; ret += "Attribute"; ret += " selectors | "; ret += "3 | "; ret += "
| E[foo*='bar'] | "; ret += "an E element whose 'foo' attribute value contains the"; ret += " | "; ret += "Attribute"; ret += " selectors | "; ret += "3 | "; ret += "
| E[hreflang|='en'] | "; ret += "an E element whose 'hreflang' attribute has a"; ret += " | "; ret += "Attribute"; ret += " selectors | "; ret += "2 | "; ret += "
| E:root | "; ret += "an E element, root of the document | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:nth-child(n) | "; ret += "an E element, the n-th child of its parent | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:nth-last-child(n) | "; ret += "an E element, the n-th child of its parent, counting"; ret += " | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:nth-of-type(n) | "; ret += "an E element, the n-th sibling of its type | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:nth-last-of-type(n) | "; ret += "an E element, the n-th sibling of its type, counting"; ret += " | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:first-child | "; ret += "an E element, first child of its parent | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "2 | "; ret += "
| E:last-child | "; ret += "an E element, last child of its parent | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:first-of-type | "; ret += "an E element, first sibling of its type | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:last-of-type | "; ret += "an E element, last sibling of its type | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:only-child | "; ret += "an E element, only child of its parent | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:only-of-type | "; ret += "an E element, only sibling of its type | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:empty | "; ret += "an E element that has no children (including text"; ret += " | "; ret += "Structural"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:link E:visited | ";
ret += " an E element being the source anchor of a hyperlink of"; ret += " | "; ret += "The link"; ret += " pseudo-classes | "; ret += "1 | "; ret += "
| E:active E:hover E:focus | ";
ret += " an E element during certain user actions | "; ret += "The user"; ret += " action pseudo-classes | "; ret += "1 and 2 | "; ret += "
| E:target | "; ret += "an E element being the target of the referring URI | "; ret += "The target"; ret += " pseudo-class | "; ret += "3 | "; ret += "
| E:lang(fr) | "; ret += "an element of type E in language 'fr' (the document"; ret += " | "; ret += "The :lang()"; ret += " pseudo-class | "; ret += "2 | "; ret += "
| E:enabled E:disabled | ";
ret += " a user interface element E which is enabled or"; ret += " | "; ret += "The UI element states"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E:checked | "; ret += "a user interface element E which is checked (for instance a radio-button or checkbox)"; ret += " | "; ret += "The UI element states"; ret += " pseudo-classes | "; ret += "3 | "; ret += "
| E::first-line | "; ret += "the first formatted line of an E element | "; ret += "The ::first-line"; ret += " pseudo-element | "; ret += "1 | "; ret += "
| E::first-letter | "; ret += "the first formatted letter of an E element | "; ret += "The ::first-letter"; ret += " pseudo-element | "; ret += "1 | "; ret += "
| E::selection | "; ret += "the portion of an E element that is currently"; ret += " | "; ret += "The UI element"; ret += " fragments pseudo-elements | "; ret += "3 | "; ret += "
| E::before | "; ret += "generated content before an E element | "; ret += "The ::before"; ret += " pseudo-element | "; ret += "2 | "; ret += "
| E::after | "; ret += "generated content after an E element | "; ret += "The ::after"; ret += " pseudo-element | "; ret += "2 | "; ret += "
| E.warning | "; ret += "an E element whose class is"; ret += " | "; ret += "Class"; ret += " selectors | "; ret += "1 | "; ret += "
| E#myid | "; ret += "an E element with ID equal to 'myid'. | "; ret += "ID"; ret += " selectors | "; ret += "1 | "; ret += "
| E:not(s) | "; ret += "an E element that does not match simple selector s | "; ret += "Negation"; ret += " pseudo-class | "; ret += "3 | "; ret += "
| E F | "; ret += "an F element descendant of an E element | "; ret += "Descendant"; ret += " combinator | "; ret += "1 | "; ret += "
| E > F | "; ret += "an F element child of an E element | "; ret += "Child"; ret += " combinator | "; ret += "2 | "; ret += "
| E + F | "; ret += "an F element immediately preceded by an E element | "; ret += "Adjacent sibling combinator"; ret += " | "; ret += "2 | "; ret += "
| E ~ F | "; ret += "an F element preceded by an E element | "; ret += "General sibling combinator"; ret += " | "; ret += "3 | "; ret += "
The meaning of each selector is derived from the table above by"; ret += " column.
"; ret += "3. Case sensitivity
"; ret += "The case sensitivity of document language element names, attribute"; ret += " names, and attribute values in selectors depends on the document"; ret += " but in XML, they are case-sensitive.
"; ret += "4. Selector syntax
"; ret += "A selector is a chain of one"; ret += " or more sequences of simple selectors"; ret += " separated by combinators.
"; ret += "A sequence of simple selectors"; ret += " is a chain of simple selectors"; ret += " that are not separated by a combinator. It"; ret += " always begins with a type selector or a"; ret += " universal selector. No other type"; ret += " selector or universal selector is allowed in the sequence.
"; ret += "A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, content selector, or pseudo-class. One pseudo-element may be appended to the last"; ret += " sequence of simple selectors.
"; ret += "Combinators are: white space, 'greater-than";
ret += " sign' (U+003E, >), 'plus sign' (U+002B,";
ret += " +) and 'tilde' (U+007E, ~). White";
ret += " space may appear between a combinator and the simple selectors around";
ret += " it. Only the characters 'space' (U+0020), 'tab'";
ret += " never part of white space.
The elements of a document tree that are represented by a selector"; ret += " are the subjects of the selector. A"; ret += " selector consisting of a single sequence of simple selectors"; ret += " sequence of simple selectors and a combinator to a sequence imposes"; ret += " simple selectors.
"; ret += "An empty selector, containing no sequence of simple selectors and"; ret += " no pseudo-element, is an invalid"; ret += " selector.
"; ret += "5. Groups of selectors
"; ret += "When several selectors share the same declarations, they may be"; ret += " grouped into a comma-separated list. (A comma is U+002C.)
"; ret += "CSS examples:
"; ret += "In this example, we condense three rules with identical"; ret += " declarations into one. Thus,
"; ret += "h1 { font-family: sans-serif }";
ret += " h3 { font-family: sans-serif }";
ret += " is equivalent to:
"; ret += "h1, h2, h3 { font-family: sans-serif }";
ret += " Warning: the equivalence is true in this example"; ret += " because all the selectors are valid selectors. If just one of these"; ret += " selectors were invalid, the entire group of selectors would be"; ret += " heading rules would be invalidated.
"; ret += "6. Simple selectors
"; ret += "6.1. Type selector
"; ret += "A type selector is the name of a document language"; ret += " type in the document tree.
"; ret += "Example:
"; ret += "The following selector represents an h1 element in the";
ret += " document tree:
h1"; ret += "
6.1.1. Type selectors and namespaces
"; ret += "Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix";
ret += " (U+007C, |).
The namespace component may be left empty to indicate that the"; ret += " selector is only to represent elements with no declared namespace.
"; ret += "An asterisk may be used for the namespace prefix, indicating that"; ret += " with no namespace).
"; ret += "Element type selectors that have no namespace component (no";
ret += " element's namespace (equivalent to '*|') unless a default";
ret += " namespace.
A type selector containing a namespace prefix that has not been"; ret += " previously declared is an invalid selector."; ret += " language implementing Selectors. In CSS, such a mechanism is defined"; ret += " in the General Syntax module.
"; ret += "In a namespace-aware client, element type selectors will only match"; ret += " against the local"; ret += " part"; ret += " of the element's qualified"; ret += " name. See below for notes about matching"; ret += " behaviors in down-level clients.
"; ret += "In summary:
"; ret += "- ";
ret += "
ns|E";
ret += " - elements with name E in namespace ns "; ret += "
*|E";
ret += " - elements with name E in any namespace, including those without any"; ret += " "; ret += "
|E";
ret += " - elements with name E without any declared namespace "; ret += "
E";
ret += " - if no default namespace has been specified, this is equivalent to *|E."; ret += " "; ret += "
CSS examples:
"; ret += "@namespace foo url(http://www.example.com);";
ret += " h1 { color: green }";
ret += " The first rule will match only h1 elements in the";
ret += " 'http://www.example.com' namespace.
The second rule will match all elements in the"; ret += " 'http://www.example.com' namespace.
"; ret += "The third rule will match only h1 elements without";
ret += " any declared namespace.
The fourth rule will match h1 elements in any";
ret += " namespace (including those without any declared namespace).
The last rule is equivalent to the fourth rule because no default"; ret += " namespace has been defined.
"; ret += "6.2. Universal selector
"; ret += "The universal selector, written 'asterisk'";
ret += " (*), represents the qualified name of any element";
ret += " specified, see Universal selector and";
ret += " Namespaces below.
If the universal selector is not the only component of a sequence";
ret += " of simple selectors, the * may be omitted.
Examples:
"; ret += "- ";
ret += "
*[hreflang|=en]and[hreflang|=en]are"; ret += " ";
ret += " *.warningand.warningare equivalent,"; ret += " ";
ret += " *#myidand#myidare equivalent. ";
ret += "
Note: it is recommended that the";
ret += " *, representing the universal selector, not be";
ret += " omitted.
6.2.1. Universal selector and namespaces
"; ret += "The universal selector allows an optional namespace component. It"; ret += " is used as follows:
"; ret += "- ";
ret += "
ns|*";
ret += " - all elements in namespace ns "; ret += "
*|*";
ret += " - all elements "; ret += "
|*";
ret += " - all elements without any declared namespace "; ret += "
*";
ret += " - if no default namespace has been specified, this is equivalent to *|*."; ret += " "; ret += "
A universal selector containing a namespace prefix that has not"; ret += " been previously declared is an invalid"; ret += " to the language implementing Selectors. In CSS, such a mechanism is"; ret += " defined in the General Syntax module.
"; ret += "6.3. Attribute selectors
"; ret += "Selectors allow the representation of an element's attributes. When"; ret += " attribute selectors must be considered to match an element if that"; ret += " attribute selector.
"; ret += "6.3.1. Attribute presence and values"; ret += " selectors
"; ret += "CSS2 introduced four attribute selectors:
"; ret += "- ";
ret += "
[att]"; ret += "- Represents an element with the
attattribute, whatever the"; ret += " ";
ret += " [att=val]";
ret += " - Represents an element with the
attattribute whose value is"; ret += " ";
ret += " [att~=val]";
ret += " - Represents an element with the
attattribute whose value is"; ret += " a whitespace-separated list of words, one"; ret += " represent anything (since the words are separated by"; ret += " ";
ret += " [att|=val]"; ret += "- Represents an element with the
attattribute, its value"; ret += " matches (e.g., thehreflangattribute on the"; ret += "linkelement in HTML) as described in RFC 3066 ([RFC3066]). Forlang(or"; ret += "xml:lang) language subcode matching, please see the:langpseudo-class."; ret += " ";
ret += "
Attribute values must be identifiers or strings. The"; ret += " case-sensitivity of attribute names and values in selectors depends on"; ret += " the document language.
"; ret += "Examples:
"; ret += "The following attribute selector represents an h1";
ret += " element that carries the title attribute, whatever its";
ret += " value:
h1[title]"; ret += "
In the following example, the selector represents a";
ret += " span element whose class attribute has";
ret += " exactly the value 'example':
span[class='example']"; ret += "
Multiple attribute selectors can be used to represent several";
ret += " attribute. Here, the selector represents a span element";
ret += " whose hello attribute has exactly the value 'Cleveland'";
ret += " and whose goodbye attribute has exactly the value";
ret += " 'Columbus':
span[hello='Cleveland'][goodbye='Columbus']"; ret += "
The following selectors illustrate the differences between '='";
ret += " 'copyright copyleft copyeditor' on a rel attribute. The";
ret += " second selector will only represent an a element with";
ret += " an href attribute having the exact value";
ret += " 'http://www.w3.org/'.
a[rel~='copyright']";
ret += " a[href='http://www.w3.org/']";
ret += " The following selector represents a link element";
ret += " whose hreflang attribute is exactly 'fr'.
link[hreflang=fr]"; ret += "
The following selector represents a link element for";
ret += " which the values of the hreflang attribute begins with";
ret += " 'en', including 'en', 'en-US', and 'en-cockney':
link[hreflang|='en']"; ret += "
Similarly, the following selectors represents a";
ret += " DIALOGUE element whenever it has one of two different";
ret += " values for an attribute character:
DIALOGUE[character=romeo]";
ret += " DIALOGUE[character=juliet]";
ret += " 6.3.2. Substring matching attribute"; ret += " selectors
"; ret += "Three additional attribute selectors are provided for matching"; ret += " substrings in the value of an attribute:
"; ret += "- ";
ret += "
[att^=val]";
ret += " - Represents an element with the
attattribute whose value"; ret += " ";
ret += " [att$=val]"; ret += "- Represents an element with the
attattribute whose value"; ret += " ";
ret += " [att*=val]"; ret += "- Represents an element with the
attattribute whose value"; ret += " ";
ret += "
Attribute values must be identifiers or strings. The"; ret += " case-sensitivity of attribute names in selectors depends on the"; ret += " document language.
"; ret += "Examples:
"; ret += "The following selector represents an HTML object,";
ret += " image:
object[type^='image/']"; ret += "
The following selector represents an HTML anchor a with an";
ret += " href attribute whose value ends with '.html'.
a[href$='.html']"; ret += "
The following selector represents an HTML paragraph with a";
ret += " title";
ret += " attribute whose value contains the substring 'hello'
p[title*='hello']"; ret += "
6.3.3. Attribute selectors and namespaces
"; ret += "Attribute selectors allow an optional namespace component to the";
ret += " separator 'vertical bar' (|). In keeping with";
ret += " apply to attributes, therefore attribute selectors without a namespace";
ret += " (equivalent to '|attr'). An asterisk may be used for the";
ret += "
An attribute selector with an attribute name containing a namespace"; ret += " prefix that has not been previously declared is an invalid selector. The mechanism for"; ret += " a namespace prefix is left up to the language implementing Selectors."; ret += "
CSS examples:
"; ret += "@namespace foo 'http://www.example.com';";
ret += " [att] { color: green }";
ret += " The first rule will match only elements with the attribute";
ret += " att in the 'http://www.example.com' namespace with the";
ret += " value 'val'.
The second rule will match only elements with the attribute";
ret += " att regardless of the namespace of the attribute";
ret += " (including no declared namespace).
The last two rules are equivalent and will match only elements";
ret += " with the attribute att where the attribute is not";
ret += " declared to be in a namespace.
6.3.4. Default attribute values in DTDs
"; ret += "Attribute selectors represent explicitly set attribute values in"; ret += " selectors. Selectors should be designed so that they work even if the"; ret += " default values are not included in the document tree.
"; ret += "More precisely, a UA is not required to read an 'external"; ret += " subset' of the DTD but is required to look for default"; ret += " attribute values in the document's 'internal subset.' (See [XML10] for definitions of these subsets.)
"; ret += "A UA that recognizes an XML namespace [XMLNAMES] is not required to use its"; ret += " required to use its built-in knowledge of the XHTML DTD.)
"; ret += "Note: Typically, implementations"; ret += " choose to ignore external subsets.
"; ret += "Example:
"; ret += "Consider an element EXAMPLE with an attribute 'notation' that has a"; ret += " default value of 'decimal'. The DTD fragment might be
"; ret += "<!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'>"; ret += "
If the style sheet contains the rules
"; ret += "EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
ret += " EXAMPLE[notation=octal] { /*... other settings...*/ }";
ret += " the first rule will not match elements whose 'notation' attribute"; ret += " attribute selector for the default value must be dropped:
"; ret += "EXAMPLE { /*... default property settings ...*/ }";
ret += " EXAMPLE[notation=octal] { /*... other settings...*/ }";
ret += " Here, because the selector EXAMPLE[notation=octal] is";
ret += " cases' style rules.
6.4. Class selectors
"; ret += "Working with HTML, authors may use the period (U+002E,";
ret += " .) notation as an alternative to the ~=";
ret += " notation when representing the class attribute. Thus, for";
ret += " HTML, div.value and div[class~=value] have";
ret += " 'period' (.).
UAs may apply selectors using the period (.) notation in XML"; ret += " 1.0 [SVG] describes the SVG"; ret += " 'class' attribute and how a UA should interpret it, and"; ret += " similarly MathML 1.01 [MATH] describes the MathML"; ret += " 'class' attribute.)
"; ret += "CSS examples:
"; ret += "We can assign style information to all elements with";
ret += " class~='pastoral' as follows:
*.pastoral { color: green } /* all elements with class~=pastoral */";
ret += " or just
"; ret += ".pastoral { color: green } /* all elements with class~=pastoral */";
ret += " The following assigns style only to H1 elements with";
ret += " class~='pastoral':
H1.pastoral { color: green } /* H1 elements with class~=pastoral */";
ret += " Given these rules, the first H1 instance below would not have"; ret += " green text, while the second would:
"; ret += "<H1>Not green</H1>";
ret += " <H1 class='pastoral'>Very green</H1>";
ret += " To represent a subset of 'class' values, each value must be preceded"; ret += " by a '.', in any order.
"; ret += "CSS example:
"; ret += "The following rule matches any P element whose 'class' attribute"; ret += " has been assigned a list of whitespace-separated values that includes"; ret += " 'pastoral' and 'marine':
"; ret += "p.pastoral.marine { color: green }";
ret += " This rule matches when class='pastoral blue aqua";
ret += " marine' but does not match for class='pastoral";
ret += " blue'.
Note: Because CSS gives considerable"; ret += " not.
"; ret += "Note: If an element has multiple"; ret += " this specification.
"; ret += "6.5. ID selectors
"; ret += "Document languages may contain attributes that are declared to be"; ret += " applies.
"; ret += "An ID-typed attribute of a document language allows authors to";
ret += " ID selectors represent an element instance based on its identifier. An";
ret += " #) immediately followed by the ID value, which must be an";
ret += " identifier.
Selectors does not specify how a UA knows the ID-typed attribute of"; ret += "
Examples:
"; ret += "The following ID selector represents an h1 element";
ret += " whose ID-typed attribute has the value 'chapter1':
h1#chapter1"; ret += "
The following ID selector represents any element whose ID-typed"; ret += " attribute has the value 'chapter1':
"; ret += "#chapter1"; ret += "
The following selector represents any element whose ID-typed"; ret += " attribute has the value 'z98y'.
"; ret += "*#z98y"; ret += "
Note. In XML 1.0 [XML10], the information about which attribute";
ret += " should use normal attribute selectors instead:";
ret += " [name=p371] instead of #p371. Elements in";
ret += " XML 1.0 documents without a DTD do not have IDs at all.
If an element has multiple ID attributes, all of them must be"; ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.
"; ret += "6.6. Pseudo-classes
"; ret += "The pseudo-class concept is introduced to permit selection based on"; ret += " expressed using the other simple selectors.
"; ret += "A pseudo-class always consists of a 'colon'";
ret += " (:) followed by the name of the pseudo-class and";
ret += " optionally by a value between parentheses.
Pseudo-classes are allowed in all sequences of simple selectors"; ret += " sequences of simple selectors, after the leading type selector or"; ret += " document.
"; ret += "6.6.1. Dynamic pseudo-classes
"; ret += "Dynamic pseudo-classes classify elements on characteristics other"; ret += " that cannot be deduced from the document tree.
"; ret += "Dynamic pseudo-classes do not appear in the document source or"; ret += " document tree.
"; ret += "The link pseudo-classes: :link and :visited
"; ret += "User agents commonly display unvisited links differently from";
ret += " previously visited ones. Selectors";
ret += " provides the pseudo-classes :link and";
ret += " :visited to distinguish them:
- ";
ret += "
- The
:linkpseudo-class applies to links that have"; ret += " ";
ret += " - The
:visitedpseudo-class applies once the link has"; ret += " ";
ret += "
After some amount of time, user agents may choose to return a"; ret += " visited link to the (unvisited) ':link' state.
"; ret += "The two states are mutually exclusive.
"; ret += "Example:
"; ret += "The following selector represents links carrying class";
ret += " external and already visited:
a.external:visited"; ret += "
Note: It is possible for style sheet"; ret += "
UAs may therefore treat all links as unvisited links, or implement"; ret += " and unvisited links differently.
"; ret += "The user action pseudo-classes"; ret += " :hover, :active, and :focus
"; ret += "Interactive user agents sometimes change the rendering in response"; ret += " to user actions. Selectors provides"; ret += " acting on.
"; ret += "- ";
ret += "
- The
:hoverpseudo-class applies while the user"; ret += " element. User agents not that do not support interactive"; ret += " media do not have to support this pseudo-class. Some conforming"; ret += " user agents that support interactive"; ret += " media may not be able to support this pseudo-class (e.g., a pen"; ret += " ";
ret += " - The
:activepseudo-class applies while an element"; ret += " ";
ret += " - The
:focuspseudo-class applies while an element"; ret += " ";
ret += "
There may be document language or implementation specific limits on";
ret += " which elements can become :active or acquire";
ret += " :focus.
These pseudo-classes are not mutually exclusive. An element may"; ret += " match several pseudo-classes at the same time.
"; ret += "Selectors doesn't define if the parent of an element that is"; ret += " ':active' or ':hover' is also in that state.
"; ret += "Examples:
"; ret += "a:link /* unvisited links */";
ret += " a:active /* active links */";
ret += " An example of combining dynamic pseudo-classes:
"; ret += "a:focus";
ret += " a:focus:hover";
ret += " The last selector matches a elements that are in";
ret += " the pseudo-class :focus and in the pseudo-class :hover.
Note: An element can be both ':visited'"; ret += " and ':active' (or ':link' and ':active').
"; ret += "6.6.2. The target pseudo-class :target
"; ret += "Some URIs refer to a location within a resource. This kind of URI"; ret += " identifier (called the fragment identifier).
"; ret += "URIs with fragment identifiers link to a certain element within the";
ret += " pointing to an anchor named section_2 in an HTML";
ret += " document:
http://example.com/html/top.html#section_2"; ret += "
A target element can be represented by the :target";
ret += " the document has no target element.
Example:
"; ret += "p.note:target"; ret += "
This selector represents a p element of class";
ret += " note that is the target element of the referring";
ret += " URI.
CSS example:
"; ret += "Here, the :target pseudo-class is used to make the";
ret += " target element red and place an image before it, if there is one:
*:target { color : red }";
ret += " *:target::before { content : url(target.png) }";
ret += " 6.6.3. The language pseudo-class :lang
"; ret += "If the document language specifies how the human language of an";
ret += " element is determined, it is possible to write selectors that";
ret += " represent an element based on its language. For example, in HTML [HTML4], the language is determined by a";
ret += " combination of the lang attribute, the meta";
ret += " headers). XML uses an attribute called xml:lang, and";
ret += " the language.
The pseudo-class :lang(C) represents an element that";
ret += " :lang() selector is based solely on the identifier C";
ret += " element's language value, in the same way as if performed by the '|=' operator in attribute";
ret += " selectors. The identifier C does not have to be a valid language";
ret += " name.
C must not be empty. (If it is, the selector is invalid.)
"; ret += "Note: It is recommended that"; ret += " documents and protocols indicate language using codes from RFC 3066 [RFC3066] or its successor, and by means of"; ret += " 'xml:lang' attributes in the case of XML-based documents [XML10]. See "; ret += " 'FAQ: Two-letter or three-letter language codes.'
"; ret += "Examples:
"; ret += "The two following selectors represent an HTML document that is in";
ret += " Belgian, French, or German. The two next selectors represent";
ret += " q quotations in an arbitrary element in Belgian, French,";
ret += " or German.
html:lang(fr-be)";
ret += " :lang(de) > q";
ret += " 6.6.4. The UI element states pseudo-classes
"; ret += "The :enabled and :disabled pseudo-classes
"; ret += "The :enabled pseudo-class allows authors to customize";
ret += " an enabled input element without also specifying what it";
ret += " would look like when it was disabled.
Similar to :enabled, :disabled allows the";
ret += " element should look.
Most elements will be neither enabled nor disabled. An element is"; ret += " presently activate it or transfer focus to it.
"; ret += "The :checked pseudo-class
"; ret += "Radio and checkbox elements can be toggled by the user. Some menu";
ret += " toggled 'on' the :checked pseudo-class applies. The";
ret += " :checked pseudo-class initially applies to such elements";
ret += " that have the HTML4 selected and checked";
ret += " attributes as described in Section";
ret += " 17.2.1 of HTML4, but of course the user can toggle 'off' such";
ret += " elements in which case the :checked pseudo-class would no";
ret += " longer apply. While the :checked pseudo-class is dynamic";
ret += " on the presence of the semantic HTML4 selected and";
ret += " checked attributes, it applies to all media.";
ret += "
The :indeterminate pseudo-class
"; ret += "Radio and checkbox elements can be toggled by the user, but are"; ret += " This can be due to an element attribute, or DOM manipulation.
"; ret += "A future version of this specification may introduce an";
ret += " :indeterminate pseudo-class that applies to such elements.";
ret += "
6.6.5. Structural pseudo-classes
"; ret += "Selectors introduces the concept of structural"; ret += " pseudo-classes to permit selection based on extra information that"; ret += " the document tree but cannot be represented by other simple selectors or"; ret += "
Note that standalone pieces of PCDATA (text nodes in the DOM) are"; ret += "
:root pseudo-class
"; ret += "The :root pseudo-class represents an element that is";
ret += " HTML element.";
ret += "
:nth-child() pseudo-class
"; ret += "The";
ret += " :nth-child(a";
ret += " an+b)n+b-1 siblings";
ret += " before it in the document tree, for a given positive";
ret += " integer or zero value of n, and has a parent element. In";
ret += " other words, this matches the bth child of an element after";
ret += " all the children have been split into groups of a elements";
ret += " each. For example, this allows the selectors to address every other";
ret += " of paragraph text in a cycle of four. The a and";
ret += " b values must be zero, negative integers or positive";
ret += "
In addition to this, :nth-child() can take";
ret += " 'odd' and 'even' as arguments instead.";
ret += " 'odd' has the same signification as 2n+1,";
ret += " and 'even' has the same signification as 2n.";
ret += "
Examples:
"; ret += "tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
ret += " p:nth-child(4n+4) { color: purple; }";
ret += " When a=0, no repeating is used, so for example";
ret += " :nth-child(0n+5) matches only the fifth child. When";
ret += " a=0, the an part need not be";
ret += " :nth-child(b) and the last example simplifies";
ret += " to :nth-child(5).";
ret += "
Examples:
"; ret += "foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */";
ret += " foo:nth-child(1) /* same */";
ret += " When a=1, the number may be omitted from the rule."; ret += "
Examples:
"; ret += "The following selectors are therefore equivalent:
"; ret += "bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */";
ret += " bar /* same but lower specificity (0,0,1) */";
ret += " If b=0, then every ath element is picked. In"; ret += " such a case, the b part may be omitted."; ret += "
Examples:
"; ret += "tr:nth-child(2n+0) /* represents every even row of an HTML table */";
ret += " tr:nth-child(2n) /* same */";
ret += " If both a and b are equal to zero, the"; ret += " pseudo-class represents no element in the document tree.
"; ret += "The value a can be negative, but only the positive";
ret += " values of an+b, for";
ret += " n≥0, may represent an element in the document";
ret += " tree.
Example:
"; ret += "html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */"; ret += "
When the value b is negative, the '+' character in the"; ret += " character indicating the negative value of b).
"; ret += "Examples:
"; ret += ":nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */";
ret += " :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */";
ret += " :nth-last-child() pseudo-class
"; ret += "The :nth-last-child(an+b)";
ret += " an+b-1 siblings";
ret += " after it in the document tree, for a given positive";
ret += " integer or zero value of n, and has a parent element. See";
ret += " :nth-child() pseudo-class for the syntax of its argument.";
ret += " It also accepts the 'even' and 'odd' values";
ret += "
Examples:
"; ret += "tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */";
ret += " counting from the last one */";
ret += " :nth-of-type() pseudo-class
"; ret += "The :nth-of-type(an+b)";
ret += " an+b-1 siblings with the same";
ret += " element name before it in the document tree, for a";
ret += " given zero or positive integer value of n, and has a";
ret += " parent element. In other words, this matches the bth child";
ret += " groups of a elements each. See :nth-child() pseudo-class";
ret += " 'even' and 'odd' values.";
ret += "
CSS example:
"; ret += "This allows an author to alternate the position of floated images:
"; ret += "img:nth-of-type(2n+1) { float: right; }";
ret += " img:nth-of-type(2n) { float: left; }";
ret += " :nth-last-of-type() pseudo-class
"; ret += "The :nth-last-of-type(an+b)";
ret += " an+b-1 siblings with the same";
ret += " element name after it in the document tree, for a";
ret += " given zero or positive integer value of n, and has a";
ret += " parent element. See :nth-child() pseudo-class for the";
ret += " syntax of its argument. It also accepts the 'even' and 'odd'";
ret += "
Example:
"; ret += "To represent all h2 children of an XHTML";
ret += " body except the first and last, one could use the";
ret += " following selector:
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)"; ret += "
In this case, one could also use :not(), although the";
ret += " selector ends up being just as long:
body > h2:not(:first-of-type):not(:last-of-type)"; ret += "
:first-child pseudo-class
"; ret += "Same as :nth-child(1). The :first-child";
ret += "
Examples:
"; ret += "The following selector represents a p element that is";
ret += " the first child of a div element:
div > p:first-child"; ret += "
This selector can represent the p inside the";
ret += " div of the following fragment:
<p> The last P before the note.</p>";
ret += " </div>";
ret += " but cannot represent the second p in the following";
ret += " <p> The last P before the note.</p>";
ret += " </div>";
ret += " The following two selectors are usually equivalent:
"; ret += "* > a:first-child /* a is first child of any element */";
ret += " a:first-child /* Same (assuming a is not the root element) */";
ret += " :last-child pseudo-class
"; ret += "Same as :nth-last-child(1). The :last-child";
ret += "
Example:
"; ret += "The following selector represents a list item li that";
ret += " is the last child of an ordered list ol.";
ret += "
ol > li:last-child"; ret += "
:first-of-type pseudo-class
"; ret += "Same as :nth-of-type(1). The :first-of-type";
ret += "
Example:
"; ret += "The following selector represents a definition title";
ret += " dt inside a definition list dl, this";
ret += " dt being the first of its type in the list of children of";
ret += " its parent element.
dl dt:first-of-type"; ret += "
It is a valid description for the first two dt";
ret += " elements in the following example but not for the third one:
<dl>";
ret += " </dl>";
ret += " :last-of-type pseudo-class
"; ret += "Same as :nth-last-of-type(1). The";
ret += " :last-of-type pseudo-class represents an element that is";
ret += " element.
Example:
"; ret += "The following selector represents the last data cell";
ret += " td of a table row.
tr > td:last-of-type"; ret += "
:only-child pseudo-class
"; ret += "Represents an element that has a parent element and whose parent";
ret += " :first-child:last-child or";
ret += " :nth-child(1):nth-last-child(1), but with a lower";
ret += " specificity.
:only-of-type pseudo-class
"; ret += "Represents an element that has a parent element and whose parent";
ret += " as :first-of-type:last-of-type or";
ret += " :nth-of-type(1):nth-last-of-type(1), but with a lower";
ret += " specificity.
:empty pseudo-class
"; ret += "The :empty pseudo-class represents an element that has";
ret += " empty or not.
Examples:
"; ret += "p:empty is a valid representation of the following fragment:";
ret += "
<p></p>"; ret += "
foo:empty is not a valid representation for the";
ret += " following fragments:
<foo>bar</foo>"; ret += "
<foo><bar>bla</bar></foo>"; ret += "
<foo>this is not <bar>:empty</bar></foo>"; ret += "
6.6.6. Blank
"; ret += " "; ret += "This section intentionally left blank.
"; ret += " "; ret += "6.6.7. The negation pseudo-class
"; ret += "The negation pseudo-class, :not(X), is a";
ret += " functional notation taking a simple";
ret += " selector (excluding the negation pseudo-class itself and";
ret += " ";
ret += "
Examples:
"; ret += "The following CSS selector matches all button";
ret += " elements in an HTML document that are not disabled.
button:not([DISABLED])"; ret += "
The following selector represents all but FOO";
ret += " elements.
*:not(FOO)"; ret += "
The following group of selectors represents all HTML elements"; ret += " except links.
"; ret += "html|*:not(:link):not(:visited)"; ret += "
Default namespace declarations do not affect the argument of the"; ret += " type selector.
"; ret += "Examples:
"; ret += "Assuming that the default namespace is bound to"; ret += " elements that are not in that namespace:
"; ret += "*|*:not(*)"; ret += "
The following CSS selector matches any element being hovered,"; ret += " rule when they are being hovered.
"; ret += "*|*:not(:hover)"; ret += "
Note: the :not() pseudo allows";
ret += " useless selectors to be written. For instance :not(*|*),";
ret += " which represents no element at all, or foo:not(bar),";
ret += " which is equivalent to foo but with a higher";
ret += " specificity.
7. Pseudo-elements
"; ret += "Pseudo-elements create abstractions about the document tree beyond";
ret += " source document (e.g., the ::before and";
ret += " ::after pseudo-elements give access to generated";
ret += " content).
A pseudo-element is made of two colons (::) followed";
ret += " by the name of the pseudo-element.
This :: notation is introduced by the current document";
ret += " :first-line, :first-letter,";
ret += " :before and :after). This compatibility is";
ret += " not allowed for the new pseudo-elements introduced in CSS level 3.
Only one pseudo-element may appear per selector, and if present it"; ret += " must appear after the sequence of simple selectors that represents the"; ret += " subjects of the selector. A"; ret += " pesudo-elements per selector.
"; ret += "7.1. The ::first-line pseudo-element
"; ret += "The ::first-line pseudo-element describes the contents";
ret += "
CSS example:
"; ret += "p::first-line { text-transform: uppercase }";
ret += " The above rule means 'change the letters of the first line of every"; ret += " paragraph to uppercase'.
"; ret += "The selector p::first-line does not match any real";
ret += " agents will insert at the beginning of every paragraph.
Note that the length of the first line depends on a number of"; ret += " an ordinary HTML paragraph such as:
"; ret += " <P>This is a somewhat long HTML ";
ret += " ";
ret += " the lines of which happen to be broken as follows:"; ret += "
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
ret += " ";
ret += " This paragraph might be 'rewritten' by user agents to include the";
ret += " fictional tag sequence for ::first-line. This";
ret += " fictional tag sequence helps to show how properties are inherited.
<P><P::first-line> This is a somewhat long HTML ";
ret += " paragraph that </P::first-line> will be broken into several";
ret += " ";
ret += " If a pseudo-element breaks up a real element, the desired effect";
ret += " with a span element:
<P><SPAN class='test'> This is a somewhat long HTML";
ret += " lines.</SPAN> The first line will be identified";
ret += " ";
ret += " the user agent could simulate start and end tags for";
ret += " span when inserting the fictional tag sequence for";
ret += " ::first-line.";
ret += "
<P><P::first-line><SPAN class='test'> This is a";
ret += " paragraph that will </SPAN></P::first-line><SPAN";
ret += " class='test'> be";
ret += " lines.</SPAN> The first line will be identified";
ret += " ";
ret += " In CSS, the ::first-line pseudo-element can only be";
ret += " or a table-cell.
The 'first formatted line' of an";
ret += " line of the div in <DIV><P>This";
ret += " line...</P></DIV> is the first line of the p";
ret += " that both p and div are block-level).";
ret += "
The first line of a table-cell or inline-block cannot be the first";
ret += " formatted line of an ancestor element. Thus, in <DIV><P";
ret += " etcetera</DIV> the first formatted line of the";
ret += " div is not the line 'Hello'.";
ret += "
Note that the first line of the p in this";
ret += " fragment: <p><br>First... doesn't contain any";
ret += " letters (assuming the default style for br in HTML";
ret += "
A UA should act as if the fictional start tags of the";
ret += " ::first-line pseudo-elements were nested just inside the";
ret += " is an example. The fictional tag sequence for
<DIV>";
ret += " ";
ret += " is
"; ret += " <DIV>";
ret += " ";
ret += " The ::first-line pseudo-element is similar to an";
ret += " following properties apply to a ::first-line";
ret += " properties as well.
7.2. The ::first-letter pseudo-element
"; ret += "The ::first-letter pseudo-element represents the first";
ret += " is 'none'; otherwise, it is similar to a floated element.
In CSS, these are the properties that apply to ::first-letter";
ret += " of the letter, unlike for normal elements.
Example:
"; ret += "This example shows a possible rendering of an initial cap. Note";
ret += " ::first-letter";
ret += " fictional start tag of the first letter is inside the span,";
ret += " the font weight of the first letter is normal, not bold as the span:";
ret += "
p { line-height: 1.1 }";
ret += " ";
ret += " ";
ret += "
The following CSS will make a drop cap initial letter span about two"; ret += " lines:
"; ret += " <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
ret += " ";
ret += " This example might be formatted as follows:
"; ret += "";
ret += "
The fictional tag sequence is:
"; ret += " <P>";
ret += " ";
ret += " Note that the ::first-letter pseudo-element tags abut";
ret += " block element.
In order to achieve traditional drop caps formatting, user agents"; ret += " glyph outline may be taken into account when formatting.
"; ret += "Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),"; ret += " be included. [UNICODE]
"; ret += "The ::first-letter also applies if the first letter is";
ret += " money.'
In CSS, the ::first-letter pseudo-element applies to";
ret += " elements. A future version of this specification";
ret += " types.
The ::first-letter pseudo-element can be used with all";
ret += " the element, even if that first text is in a descendant.
Example:
"; ret += "The fictional tag sequence for this HTMLfragment:"; ret += "
<div>";
ret += " <p>The first text.";
ret += " is:"; ret += "
<div>";
ret += " <p><div::first-letter><p::first-letter>T</...></...>he first text.";
ret += " The first letter of a table-cell or inline-block cannot be the";
ret += " first letter of an ancestor element. Thus, in <DIV><P";
ret += " etcetera</DIV> the first letter of the div is";
ret += " letter 'H'. In fact, the div doesn't have a first letter.";
ret += "
The first letter must occur on the first formatted line. For example, in";
ret += " this fragment: <p><br>First... the first line";
ret += " doesn't contain any letters and ::first-letter doesn't";
ret += " match anything (assuming the default style for br in HTML";
ret += "
In CSS, if an element is a list item ('display: list-item'), the";
ret += " ::first-letter applies to the first letter in the";
ret += " ::first-letter on list items with 'list-style-position:";
ret += " inside'. If an element has ::before or";
ret += " ::after content, the ::first-letter applies";
ret += " to the first letter of the element including that content.";
ret += "
Example:
"; ret += "After the rule 'p::before {content: 'Note: '}', the selector"; ret += " 'p::first-letter' matches the 'N' of 'Note'.
"; ret += "Some languages may have specific rules about how to treat certain";
ret += " considered within the ::first-letter pseudo-element.";
ret += "
If the letters that would form the ::first-letter are not in the";
ret += " same element, such as ''T' in <p>'<em>T..., the UA";
ret += " both elements, or simply not create a pseudo-element.
Similarly, if the first letter(s) of the block are not at the start"; ret += "
Example:
"; ret += "The following example illustrates"; ret += " paragraph will be 'red'.
"; ret += "p { color: red; font-size: 12pt }";
ret += " <P>Some text that ends up on two lines</P>";
ret += " Assuming that a line break will occur before the word 'ends', the"; ret += " fictional tag"; ret += " sequence for this fragment might be:
"; ret += "<P>";
ret += " </P>";
ret += " Note that the ::first-letter element is inside the ::first-line";
ret += " element. Properties set on ::first-line are inherited by";
ret += " ::first-letter, but are overridden if the same property is";
ret += " ::first-letter.
7.3. The ::selection"; ret += " pseudo-element
"; ret += "The ::selection pseudo-element applies to the portion";
ret += " field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be";
ret += " named :selected)";
ret += "
Although the ::selection pseudo-element is dynamic in";
ret += " [CSS21]) which was originally rendered to a";
ret += " ::selection state to that other medium, and have all the";
ret += " required — UAs may omit the ::selection";
ret += "
These are the CSS properties that apply to ::selection";
ret += " ::selection may be ignored.";
ret += "
7.4. The ::before and ::after pseudo-elements
"; ret += "The ::before and ::after pseudo-elements";
ret += " content. They are explained in CSS 2.1 [CSS21].
When the ::first-letter and ::first-line";
ret += " pseudo-elements are combined with ::before and";
ret += " ::after, they apply to the first letter or line of the";
ret += " element including the inserted text.
8. Combinators
"; ret += "8.1. Descendant combinator
"; ret += "At times, authors may want selectors to describe an element that is";
ret += " EM element that is contained within an H1";
ret += " descendant combinator is white space that";
ret += " separates two sequences of simple selectors. A selector of the form";
ret += " 'A B' represents an element B that is an";
ret += " arbitrary descendant of some ancestor element A.";
ret += "
Examples:
"; ret += "For example, consider the following selector:
"; ret += "h1 em"; ret += "
It represents an em element being the descendant of";
ret += " an h1 element. It is a correct and valid, but partial,";
ret += " description of the following fragment:
<h1>This <span class='myclass'>headline";
ret += " is <em>very</em> important</span></h1>";
ret += " The following selector:
"; ret += "div * p"; ret += "
represents a p element that is a grandchild or later";
ret += " descendant of a div element. Note the whitespace on";
ret += " of the P.
The following selector, which combines descendant combinators and";
ret += " attribute selectors, represents an";
ret += " element that (1) has the href attribute set and (2) is";
ret += " inside a p that is itself inside a div:
div p *[href]"; ret += "
8.2. Child combinators
"; ret += "A child combinator describes a childhood relationship";
ret += " 'greater-than sign' (>) character and";
ret += " separates two sequences of simple selectors.";
ret += "
Examples:
"; ret += "The following selector represents a p element that is";
ret += " child of body:
body > p"; ret += "
The following example combines descendant combinators and child"; ret += " combinators.
"; ret += "div ol>li p"; ret += " "; ret += "
It represents a p element that is a descendant of an";
ret += " li element; the li element must be the";
ret += " child of an ol element; the ol element must";
ret += " be a descendant of a div. Notice that the optional white";
ret += " space around the '>' combinator has been left out.
For information on selecting the first child of an element, please";
ret += " see the section on the :first-child pseudo-class";
ret += " above.
8.3. Sibling combinators
"; ret += "There are two different sibling combinators: the adjacent sibling"; ret += " considering adjacency of elements.
"; ret += "8.3.1. Adjacent sibling combinator"; ret += "
"; ret += "The adjacent sibling combinator is made of the 'plus";
ret += " sign' (U+002B, +) character that separates two";
ret += " sequences of simple selectors. The elements represented by the two";
ret += " represented by the second one.
Examples:
"; ret += "The following selector represents a p element";
ret += " immediately following a math element:
math + p"; ret += "
The following selector is conceptually similar to the one in the";
ret += " adds a constraint to the h1 element, that it must have";
ret += " class='opener':
h1.opener + h2"; ret += "
8.3.2. General sibling combinator"; ret += "
"; ret += "The general sibling combinator is made of the 'tilde'";
ret += " (U+007E, ~) character that separates two sequences of";
ret += " simple selectors. The elements represented by the two sequences share";
ret += " represented by the second one.
Example:
"; ret += "h1 ~ pre"; ret += "
represents a pre element following an h1. It";
ret += " is a correct and valid, but partial, description of:
<h1>Definition of the function a</h1>";
ret += " <pre>function a(x) = 12x/13.5</pre>";
ret += " 9. Calculating a selector's specificity
"; ret += "A selector's specificity is calculated as follows:
"; ret += "- ";
ret += "
- count the number of ID selectors in the selector (= a) "; ret += "
- count the number of class selectors, attributes selectors, and"; ret += " "; ret += "
- count the number of element names in the selector (= c) "; ret += "
- ignore pseudo-elements "; ret += "
Selectors inside the negation pseudo-class"; ret += " a pseudo-class.
"; ret += "Concatenating the three numbers a-b-c (in a number system with a"; ret += " large base) gives the specificity.
"; ret += "Examples:
"; ret += "* /* a=0 b=0 c=0 -> specificity = 0 */";
ret += " ";
ret += " Note: the specificity of the styles";
ret += " specified in an HTML style attribute is described in CSS";
ret += " 2.1. [CSS21].
10. The grammar of Selectors
"; ret += "10.1. Grammar
"; ret += "The grammar below defines the syntax of Selectors. It is globally"; ret += " shorthand notations beyond Yacc (see [YACC])"; ret += " are used:
"; ret += "- ";
ret += "
- *: 0 or more"; ret += "
- +: 1 or more"; ret += "
- ?: 0 or 1"; ret += "
- |: separates alternatives"; ret += "
- [ ]: grouping "; ret += "
The productions are:
"; ret += "selectors_group";
ret += " ;";
ret += " 10.2. Lexical scanner
"; ret += "The following is the tokenizer, written in Flex (see"; ret += " [FLEX]) notation. The tokenizer is"; ret += " case-insensitive.
"; ret += "The two occurrences of '\377' represent the highest character"; ret += " possible code point in Unicode/ISO-10646. [UNICODE]
"; ret += "%option case-insensitive";
ret += " . return *yytext;";
ret += " 11. Namespaces and down-level clients
"; ret += "An important issue is the interaction of CSS selectors with XML"; ret += " to construct a CSS style sheet which will properly match selectors in"; ret += " is possible to construct a style sheet in which selectors would match"; ret += " elements and attributes correctly.
"; ret += "It should be noted that a down-level CSS client will (if it";
ret += " @namespace at-rules, as well as all style rules that make";
ret += " use of namespace qualified element type or attribute selectors. The";
ret += " than possibly match them incorrectly.
The use of default namespaces in CSS makes it possible to write"; ret += " element type selectors that will function in both namespace aware CSS"; ret += " down-level clients may incorrectly match selectors against XML"; ret += " elements in other namespaces.
"; ret += "The following are scenarios and examples in which it is possible to"; ret += " that do not implement this proposal.
"; ret += "- ";
ret += "
- ";
ret += "
The XML document does not use namespaces.
"; ret += "- ";
ret += "
- In this case, it is obviously not necessary to declare or use"; ret += " attribute selectors will function adequately in a down-level"; ret += " "; ret += "
- In a CSS namespace aware client, the default behavior of";
ret += " element selectors matching without regard to namespace will";
ret += " present. However, the use of specific element type selectors";
ret += " match only elements that have no namespace ('
|name')"; ret += " will guarantee that selectors will match only XML elements that"; ret += " ";
ret += "
";
ret += " - ";
ret += "
The XML document defines a single, default namespace used"; ret += " names.
"; ret += "- ";
ret += "
- In this case, a down-level client will function as if"; ret += " element type and attribute selectors will match against all"; ret += " "; ret += "
";
ret += " - ";
ret += "
The XML document does not use a default namespace, all"; ret += " to the same URI).
"; ret += "- ";
ret += "
- In this case, the down-level client will view and match";
ret += " element type and attribute selectors based on their fully";
ret += " qualified name, not the local part as outlined in the Type selectors and Namespaces";
ret += " selectors may be declared using an escaped colon";
ret += " '
\\:'"; ret += " 'html\\:h1' will match"; ret += "<html:h1>. Selectors using the qualified name"; ret += " ";
ret += " - Note that selectors declared in this fashion will"; ret += " only match in down-level clients. A CSS namespace aware"; ret += " client will match element type and attribute selectors based on"; ret += " the name's local part. Selectors declared with the fully"; ret += " "; ret += "
";
ret += " - In this case, the down-level client will view and match";
ret += " element type and attribute selectors based on their fully";
ret += " qualified name, not the local part as outlined in the Type selectors and Namespaces";
ret += " selectors may be declared using an escaped colon";
ret += " '
In other scenarios: when the namespace prefixes used in the XML are"; ret += " different namespace URIs within the same document, or in"; ret += " a CSS and XML namespace aware client.
"; ret += "12. Profiles
"; ret += "Each specification using Selectors must define the subset of W3C"; ret += " Selectors it allows and excludes, and describe the local meaning of"; ret += " all the components of that subset.
"; ret += "Non normative examples:"; ret += "
| Selectors profile | "; ret += "|
|---|---|
| Specification | "; ret += "CSS level 1 | "; ret += "
| Accepts | "; ret += "type selectors class selectors ID selectors :link,"; ret += " :visited and :active pseudo-classes descendant combinator"; ret += " ::first-line and ::first-letter pseudo-elements"; ret += " | ";
ret += "
| Excludes | "; ret += "";
ret += " universal selector namespaces | ";
ret += "
| Extra constraints | "; ret += "only one class selector allowed per sequence of simple"; ret += " selectors"; ret += " | "; ret += "
"; ret += "
| Selectors profile | "; ret += "|
|---|---|
| Specification | "; ret += "CSS level 2 | "; ret += "
| Accepts | "; ret += "type selectors universal selector attribute presence and"; ret += " values selectors class selectors ID selectors :link,"; ret += " descendant combinator child combinator adjacent"; ret += " combinator ::first-line and ::first-letter"; ret += " pseudo-elements ::before"; ret += " | ";
ret += "
| Excludes | "; ret += "";
ret += " content selectors namespaces | ";
ret += "
| Extra constraints | "; ret += "more than one class selector per sequence of simple selectors"; ret += " | "; ret += "
In CSS, selectors express pattern matching rules that determine which"; ret += "
The following selector (CSS level 2) will match all anchors a";
ret += " with attribute name set inside a section 1 header";
ret += " h1:";
ret += "
h1 a[name]"; ret += "
All CSS declarations attached to such a selector are applied to elements"; ret += " matching it.
| Selectors profile | "; ret += "|
|---|---|
| Specification | "; ret += "STTS 3 | "; ret += "
| Accepts | "; ret += "";
ret += " type selectors namespaces | ";
ret += "
| Excludes | "; ret += "non-accepted pseudo-classes pseudo-elements | ";
ret += "
| Extra constraints | "; ret += "some selectors and combinators are not allowed in fragment"; ret += " | "; ret += "
Selectors can be used in STTS 3 in two different"; ret += "
- ";
ret += "
- a selection mechanism equivalent to CSS selection mechanism:"; ret += "
- fragment descriptions that appear on the right side of declarations."; ret += " "; ret += "
13. Conformance and requirements
"; ret += "This section defines conformance with the present specification only."; ret += "
The inability of a user agent to implement part of this specification due to"; ret += "
All specifications reusing Selectors must contain a Profile listing the"; ret += " subset of Selectors it accepts or excludes, and describing the constraints"; ret += "
Invalidity is caused by a parsing error, e.g. an unrecognized token or a"; ret += "
User agents must observe the rules for handling parsing errors:"; ret += "
- ";
ret += "
- a simple selector containing an undeclared namespace prefix is invalid"; ret += " "; ret += "
- a selector containing an invalid simple selector, an invalid combinator"; ret += " "; ret += "
- a group of selectors containing an invalid selector is invalid. "; ret += "
Specifications reusing Selectors must define how to handle parsing"; ret += " used is dropped.)
"; ret += " "; ret += "14. Tests
"; ret += "This specification has a test"; ret += " suite allowing user agents to verify their basic conformance to"; ret += " and does not cover all possible combined cases of Selectors.
"; ret += "15. Acknowledgements
"; ret += "The CSS working group would like to thank everyone who has sent"; ret += " comments on this specification over the years.
"; ret += "The working group would like to extend special thanks to Donna"; ret += " the final editorial review.
"; ret += "16. References
"; ret += "- ";
ret += "
- [CSS1]"; ret += "
- Bert Bos, Håkon Wium Lie; 'Cascading"; ret += " Style Sheets, level 1', W3C Recommendation, 17 Dec 1996, revised"; ret += "
- (
http://www.w3.org/TR/REC-CSS1)"; ret += " - [CSS21]"; ret += "
- Bert Bos, Tantek Çelik, Ian Hickson, Håkon"; ret += " Wium Lie, editors; 'Cascading Style Sheets, level 2 revision"; ret += " 1', W3C Working Draft, 13 June 2005"; ret += "
- (
http://www.w3.org/TR/CSS21)"; ret += " - [CWWW]"; ret += "
- Martin J. Dürst, François Yergeau,"; ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; 'Character Model"; ret += " for the World Wide Web', W3C Recommendation, 15 February 2005"; ret += "
- (
http://www.w3.org/TR/charmod/)"; ret += " - [FLEX]"; ret += "
- 'Flex: The Lexical Scanner"; ret += " Generator', Version 2.3.7, ISBN 1882114213"; ret += "
- [HTML4]"; ret += "
- Dave Ragget, Arnaud Le Hors, Ian Jacobs,"; ret += " editors; 'HTML 4.01 Specification', W3C Recommendation, 24"; ret += "
- ";
ret += " (
http://www.w3.org/TR/html4/)"; ret += " - [MATH]"; ret += "
- Patrick Ion, Robert Miner, editors; 'Mathematical"; ret += " Markup Language (MathML) 1.01', W3C Recommendation, revision of 7"; ret += "
- (
http://www.w3.org/TR/REC-MathML/)"; ret += " - [RFC3066]"; ret += "
- H. Alvestrand; 'Tags for the"; ret += " Identification of Languages', Request for Comments 3066, January"; ret += "
- (
http://www.ietf.org/rfc/rfc3066.txt)"; ret += " - [STTS]"; ret += "
- Daniel Glazman; 'Simple Tree Transformation"; ret += " Sheets 3', Electricité de France, submission to the W3C,"; ret += "
- (
http://www.w3.org/TR/NOTE-STTS3)"; ret += " - [SVG]"; ret += "
- Jon Ferraiolo, 藤沢 淳, Dean"; ret += " Jackson, editors; 'Scalable Vector Graphics (SVG) 1.1"; ret += " Specification', W3C Recommendation, 14 January 2003"; ret += "
- (
http://www.w3.org/TR/SVG/)"; ret += " - [UNICODE] "; ret += "
- The Unicode"; ret += " Standard, Version 4.1, The Unicode Consortium. Boston, MA,"; ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode"; ret += " 4.0.1 and Unicode"; ret += " 4.1.0."; ret += "
- (
http://www.unicode.org/versions/)"; ret += " ";
ret += " - [XML10]"; ret += "
- Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,"; ret += " Eve Maler, François Yergeau, editors; 'Extensible Markup"; ret += " Language (XML) 1.0 (Third Edition)', W3C Recommendation, 4"; ret += "
- (
http://www.w3.org/TR/REC-xml/)"; ret += " - [XMLNAMES]"; ret += "
- Tim Bray, Dave Hollander, Andrew Layman,"; ret += " editors; 'Namespaces in XML', W3C Recommendation, 14"; ret += "
- (
http://www.w3.org/TR/REC-xml-names/)"; ret += " - [YACC]"; ret += "
- S. C. Johnson; 'YACC — Yet another"; ret += " compiler compiler', Technical Report, Murray Hill, 1975"; ret += "