"; + ret += "

Selectors

"; + ret += " ."; + ret += "

W3C Working Draft 15 December 2005

"; + ret += "

This version:: "; + ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
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 += "; Tantek Çelik"; + ret += "; Ian"; + ret += " Hickson (Google)"; + ret += "; Peter Linss (former"; + ret += " editor, Netscape/AOL)"; + ret += "; John Williams (former editor, Quark, Inc.)"; + ret += "

"; + 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 += "

"; + ret += "

1. Introduction"; + ret += "
- 1.1. Dependencies
- 1.2. Terminology
- 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 += "
- 6.1. Type"; + ret += " selectors"; + ret += "
  - 6.1.1. Type"; + ret += " selectors and namespaces
  "; + ret += "
- 6.2."; + ret += " Universal selector"; + ret += "
  - 6.2.1. Universal selector and"; + ret += " namespaces
  "; + ret += "
- 6.3."; + ret += " Attribute selectors"; + 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 += "
  - 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 += "
    - :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 += "
7. Pseudo-elements"; + 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 += "
- 8.1."; + ret += " Descendant combinators"; + ret += "
- 8.2. Child"; + ret += " combinators"; + ret += "
- 8.3. Sibling"; + ret += " combinators"; + 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 += "
- 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 += "

"; + 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 += "

the list of basic definitions (selector, group of selectors,"; + ret += " of simple selectors, and the term 'simple selector' is now used for"; + ret += "
an optional namespace component is now allowed in type element"; + ret += " selectors, the universal selector and attribute selectors"; + ret += "
a new combinator has been"; + ret += "
new simple selectors including substring matching attribute"; + ret += " selectors, and new pseudo-classes"; + ret += "
new pseudo-elements, and introduction of the '::' convention"; + ret += "
the grammar has been rewritten
profiles to be added to specifications integrating Selectors"; + ret += " and defining the set of selectors which is actually supported by"; + ret += "
Selectors are now a CSS3 Module and an independent"; + 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 += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "

Pattern	Meaning	Described in section	First defined in CSS level
*	any element	Universal"; + ret += " selector	2
E	an element of type E	Type selector	1
E[foo]	an E element with a 'foo' attribute	Attribute"; + ret += " selectors	2
E[foo='bar']	an E element whose 'foo' attribute value is exactly"; + ret += "	Attribute"; + ret += " selectors	2
E[foo~='bar']	an E element whose 'foo' attribute value is a list of"; + ret += "	Attribute"; + ret += " selectors	2
E[foo^='bar']	an E element whose 'foo' attribute value begins exactly"; + ret += "	Attribute"; + ret += " selectors	3
E[foo$='bar']	an E element whose 'foo' attribute value ends exactly"; + ret += "	Attribute"; + ret += " selectors	3
E[foo*='bar']	an E element whose 'foo' attribute value contains the"; + ret += "	Attribute"; + ret += " selectors	3
E[hreflang\|='en']	an E element whose 'hreflang' attribute has a"; + ret += "	Attribute"; + ret += " selectors	2
E:root	an E element, root of the document	Structural"; + ret += " pseudo-classes	3
E:nth-child(n)	an E element, the n-th child of its parent	Structural"; + ret += " pseudo-classes	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting"; + ret += "	Structural"; + ret += " pseudo-classes	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	Structural"; + ret += " pseudo-classes	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting"; + ret += "	Structural"; + ret += " pseudo-classes	3
E:first-child	an E element, first child of its parent	Structural"; + ret += " pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural"; + ret += " pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	Structural"; + ret += " pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	Structural"; + ret += " pseudo-classes	3
E:only-child	an E element, only child of its parent	Structural"; + ret += " pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	Structural"; + ret += " pseudo-classes	3
E:empty	an E element that has no children (including text"; + ret += "	Structural"; + ret += " pseudo-classes	3
E:link E:visited	an E element being the source anchor of a hyperlink of"; + ret += "	The link"; + ret += " pseudo-classes	1
E:active E:hover E:focus	an E element during certain user actions	The user"; + ret += " action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	The target"; + ret += " pseudo-class	3
E:lang(fr)	an element of type E in language 'fr' (the document"; + ret += "	The :lang()"; + ret += " pseudo-class	2
E:enabled E:disabled	a user interface element E which is enabled or"; + ret += "	The UI element states"; + ret += " pseudo-classes	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox)"; + ret += "	The UI element states"; + ret += " pseudo-classes	3
E::first-line	the first formatted line of an E element	The ::first-line"; + ret += " pseudo-element	1
E::first-letter	the first formatted letter of an E element	The ::first-letter"; + ret += " pseudo-element	1
E::selection	the portion of an E element that is currently"; + ret += "	The UI element"; + ret += " fragments pseudo-elements	3
E::before	generated content before an E element	The ::before"; + ret += " pseudo-element	2
E::after	generated content after an E element	The ::after"; + ret += " pseudo-element	2
E.warning	an E element whose class is"; + ret += "	Class"; + ret += " selectors	1
E#myid	an E element with ID equal to 'myid'.	ID"; + ret += " selectors	1
E:not(s)	an E element that does not match simple selector s	Negation"; + ret += " pseudo-class	3
E F	an F element descendant of an E element	Descendant"; + ret += " combinator	1
E > F	an F element child of an E element	Child"; + ret += " combinator	2
E + F	an F element immediately preceded by an E element	Adjacent sibling combinator"; + ret += "	2
E ~ F	an F element preceded by an E element	General sibling combinator"; + 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.

"; + ret += "

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:

"; + ret += "

h1

"; + ret += "

6.1.1. Type selectors and namespaces

"; + ret += "

Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix"; + ret += " (U+007C, |).

"; + ret += "

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.

"; + ret += "

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 += "

ns|E: elements with name E in namespace ns
*|E: elements with name E in any namespace, including those without any"; + ret += "
|E: elements with name E without any declared namespace
E: 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.

"; + ret += "

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.

"; + ret += "

The fourth rule will match h1 elements in any"; + ret += " namespace (including those without any declared namespace).

"; + ret += "

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.

"; + ret += "

If the universal selector is not the only component of a sequence"; + ret += " of simple selectors, the * may be omitted.

"; + ret += "

Examples:

"; + ret += "

*[hreflang|=en] and [hreflang|=en] are"; + ret += "
*.warning and .warning are equivalent,"; + ret += "
*#myid and #myid are equivalent.

"; + ret += "

Note: it is recommended that the"; + ret += " *, representing the universal selector, not be"; + ret += " omitted.

"; + ret += "

6.2.1. Universal selector and namespaces

"; + ret += "

The universal selector allows an optional namespace component. It"; + ret += " is used as follows:

"; + ret += "

ns|*: all elements in namespace ns
*|*: all elements
|*: all elements without any declared namespace
*: 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 += "

[att]"; + ret += ": Represents an element with the att attribute, whatever the"; + ret += "
[att=val]: Represents an element with the att attribute whose value is"; + ret += "
[att~=val]: Represents an element with the att attribute whose value is"; + ret += " a whitespace-separated list of words, one"; + ret += " represent anything (since the words are separated by"; + ret += "
[att|=val]"; + ret += ": Represents an element with the att attribute, its value"; + ret += " matches (e.g., the hreflang attribute on the"; + ret += " link element in HTML) as described in RFC 3066 ([RFC3066]). For lang (or"; + ret += " xml:lang) language subcode matching, please see the :lang pseudo-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:

"; + ret += "

h1[title]

"; + ret += "

In the following example, the selector represents a"; + ret += " span element whose class attribute has"; + ret += " exactly the value 'example':

"; + ret += "

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':

"; + ret += "

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/'.

"; + ret += "

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'.

"; + ret += "

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':

"; + ret += "

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:

"; + ret += "

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 += "

[att^=val]: Represents an element with the att attribute whose value"; + ret += "
[att$=val]"; + ret += ": Represents an element with the att attribute whose value"; + ret += "
[att*=val]"; + ret += ": Represents an element with the att attribute 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:

"; + ret += "

object[type^='image/']

"; + ret += "

The following selector represents an HTML anchor a with an"; + ret += " href attribute whose value ends with '.html'.

"; + ret += "

a[href$='.html']

"; + ret += "

The following selector represents an HTML paragraph with a"; + ret += " title"; + ret += " attribute whose value contains the substring 'hello'

"; + ret += "

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 += "

"; + 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'.

"; + ret += "

The second rule will match only elements with the attribute"; + ret += " att regardless of the namespace of the attribute"; + ret += " (including no declared namespace).

"; + ret += "

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.

"; + ret += "

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.

"; + ret += "

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' (.).

"; + ret += "

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:

"; + ret += "

*.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':

"; + ret += "

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'.

"; + ret += "

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.

"; + ret += "

Selectors does not specify how a UA knows the ID-typed attribute of"; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following ID selector represents an h1 element"; + ret += " whose ID-typed attribute has the value 'chapter1':

"; + ret += "

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.

"; + ret += "

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.

"; + ret += "

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 :link pseudo-class applies to links that have"; + ret += "
The :visited pseudo-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:

"; + ret += "

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 += "

The :hover pseudo-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 += "
The :active pseudo-class applies while an element"; + ret += "
The :focus pseudo-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.

"; + ret += "

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.

"; + ret += "

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:

"; + ret += "

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.

"; + ret += "

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.

"; + ret += "

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:

"; + ret += "

*: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.

"; + ret += "

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.

"; + ret += "

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.

"; + ret += "

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.

"; + ret += "

Similar to :enabled, :disabled allows the"; + ret += " element should look.

"; + ret += "

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 += "

"; + 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(an+b)"; + ret += " an+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 += "

"; + 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 += "

"; + 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 += "

"; + 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 += "

"; + 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.

"; + ret += "

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 += "

"; + 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 += "

"; + 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 += "

"; + 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:

"; + ret += "

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:

"; + ret += "

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 += "

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element that is"; + ret += " the first child of a div element:

"; + ret += "

div > p:first-child

"; + ret += "

This selector can represent the p inside the"; + ret += " div of the following fragment:

"; + ret += "

<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 += "

"; + 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 += "

"; + 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.

"; + ret += "

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:

"; + ret += "

<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.

"; + ret += "

Example:

"; + ret += "

The following selector represents the last data cell"; + ret += " td of a table row.

"; + ret += "

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.

"; + ret += "

: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.

"; + ret += "

:empty pseudo-class

"; + ret += "

The :empty pseudo-class represents an element that has"; + ret += " empty or not.

"; + ret += "

Examples:

"; + ret += "

p:empty is a valid representation of the following fragment:"; + ret += "

"; + ret += "

<p></p>

"; + ret += "

foo:empty is not a valid representation for the"; + ret += " following fragments:

"; + ret += "

<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 += "

"; + ret += "

Examples:

"; + ret += "

The following CSS selector matches all button"; + ret += " elements in an HTML document that are not disabled.

"; + ret += "

button:not([DISABLED])

"; + ret += "

The following selector represents all but FOO"; + ret += " elements.

"; + ret += "

*: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.

"; + ret += "

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).

"; + ret += "

A pseudo-element is made of two colons (::) followed"; + ret += " by the name of the pseudo-element.

"; + ret += "

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.

"; + ret += "

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 += "

"; + 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.

"; + ret += "

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.

"; + ret += "

      <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:

"; + ret += "

      <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.

"; + ret += "

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

"; + ret += "

      <DIV>";
+    ret += "

"; + 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.

"; + ret += "

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.

"; + ret += "

In CSS, these are the properties that apply to ::first-letter"; + ret += " of the letter, unlike for normal elements.

"; + ret += "

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 += "

Image illustrating the ::first-letter pseudo-element "; + 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 += "

Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements "; + ret += "

"; + ret += "

The fictional tag sequence is:

"; + ret += "

      <P>";
+    ret += "

"; + ret += "

Note that the ::first-letter pseudo-element tags abut"; + ret += " block element.

"; + ret += "

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 += "

Quotes that precede the";
+ ret += " first letter should be included.

"; + ret += "

The ::first-letter also applies if the first letter is"; + ret += " money.'

"; + ret += "

In CSS, the ::first-letter pseudo-element applies to"; + ret += " elements. A future version of this specification"; + ret += " types.

"; + ret += "

The ::first-letter pseudo-element can be used with all"; + ret += " the element, even if that first text is in a descendant.

"; + ret += "

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 += "

"; + 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.

"; + ret += "

Similarly, if the first letter(s) of the block are not at the start"; + ret += "

"; + 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.

"; + ret += "

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].

"; + ret += "

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.

"; + ret += "

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 += "

"; + 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:

"; + ret += "

<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.

"; + ret += "

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:

"; + ret += "

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 += "

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element that is"; + ret += " child of body:

"; + ret += "

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.

"; + ret += "

For information on selecting the first child of an element, please"; + ret += " see the section on the :first-child pseudo-class"; + ret += " above.

"; + ret += "

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.

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element"; + ret += " immediately following a math element:

"; + ret += "

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':

"; + ret += "

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.

"; + ret += "

Example:

"; + ret += "

h1 ~ pre

"; + ret += "

represents a pre element following an h1. It"; + ret += " is a correct and valid, but partial, description of:

"; + ret += "

<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 += "

count the number of ID selectors in the selector (= a)
count the number of class selectors, attributes selectors, and"; + ret += "
count the number of element names in the selector (= c)
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].

"; + ret += "

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 += "

*: 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.

"; + ret += "

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 += "
The XML document does not use namespaces.
"; + ret += "
- In this case, it is obviously not necessary to declare or use"; + ret += " attribute selectors will function adequately in a down-level"; + 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 += "
The XML document defines a single, default namespace used"; + ret += " names.
"; + 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 += "
The XML document does not use a default namespace, all"; + ret += " to the same URI).
"; + 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 += "
- 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 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
Specification	CSS level 1
Accepts	type selectors class selectors ID selectors :link,"; + ret += " :visited and :active pseudo-classes descendant combinator"; + ret += " ::first-line and ::first-letter pseudo-elements"; + ret += "
Excludes	"; + ret += " universal selector attribute selectors :hover and"; + ret += " pseudo-classes :target pseudo-class :lang()"; + ret += " pseudo-class all UI"; + ret += " element states pseudo-classes all structural"; + ret += " pseudo-classes negation pseudo-class all"; + ret += " UI element fragments pseudo-elements ::before and ::after"; + ret += " pseudo-elements child combinators sibling combinators"; + ret += " namespaces
Extra constraints	only one class selector allowed per sequence of simple"; + ret += " selectors"; + ret += "

Selectors profile
Specification	CSS level 2
Accepts	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 += "
Excludes	"; + ret += " content selectors substring matching attribute"; + ret += " selectors :target pseudo-classes all UI element"; + ret += " states pseudo-classes all structural pseudo-classes other"; + ret += " than :first-child negation pseudo-class all UI element"; + ret += " fragments pseudo-elements general sibling combinators"; + ret += " namespaces
Extra constraints	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.

"; + ret += "

Selectors profile
Specification	STTS 3
Accepts	"; + ret += " type selectors universal selectors attribute"; + ret += " selectors class"; + ret += " selectors ID selectors all structural"; + ret += " pseudo-classes "; + ret += " namespaces
Excludes	non-accepted pseudo-classes pseudo-elements
Extra constraints	some selectors and combinators are not allowed in fragment"; + ret += "

"; + ret += "

Selectors can be used in STTS 3 in two different"; + 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 += "

a simple selector containing an undeclared namespace prefix is invalid"; + ret += "
a selector containing an invalid simple selector, an invalid combinator"; + 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 += "

[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]: 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 += "
[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 += "