W3C

CSS3 module: W3C selectors

W3C Working Draft 3 August 1999

This version:
http://www.w3.org/TR/1999/WD-CSS3-selectors-19990803
Latest version:
http://www.w3.org/TR/CSS3-selectors
Previous version:
(no earlier public version)
Editor:
Daniel Glazman (Electricité de France), <Daniel.Glazman@der.edf.fr>

Abstract

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. To bind style properties to elements in the document, it uses selectors, which are patterns that match to elements. This draft describes the selectors that are proposed for CSS level 3. It includes and extends the selectors of CSS level 2.

Status of this document

This document is the first draft of one of the "modules" for the upcoming CSS3 specification. It not only describes the selectors that already exist in CSS1 and CSS2, but also proposes new selectors for CSS3 as well as for other languages that may need them. The Working Group doesn't expect that all implementations of CSS3 will have to implement all types of selectors. Instead, there will probably be a small number of variants of CSS3, so-called "profiles." For example, it may be that only the profile for non-interactive user agents will include all of the proposed selectors.

This is a Working Draft of the W3C in the style activity. This draft may be updated or dropped as a work item of W3C at any time. It should not be referenced except as a work-in-progress. Experimental implementations are encouraged, as long as they are clearly marked as experimental. The working group would like to receive feedback: comments on this draft may be send to the editor, discussion takes place on the (archived) public mailing list www-style@w3.org. W3C Members can also send comments directly to the CSS & FP working group.

To learn about the current status of this working draft, see the W3C Technical Reports page or follow the "latest version" link above.

Table of contents


Context

Members of the CSS+FP Working Group proposed during the Clamart meeting to modularize the CSS specification.

This modularization, and the externalization of the general syntax, of CSS will reduce the size of the spec and allow new types of specifications to use selectors and/or CSS general syntax. For instance behaviours or tree transformations.

Proposal

Selectors, as described in CSS 2, represent only conditions on a structure. It is proposed to extract section 5 from CSS 2 specification and rewrite it so selectors can be a general description of a structure, implying a condition or not.

It is also suggested to extend the CSS 2 set of selectors. CSS 2 selectors have been voluntarily restricted to conditions that do not block the progressive rendering in visual browsers. If this point of view can be easily understood for applications built over the Internet, it is much too restrictive for corporate complex applications built over an intranet or applications that do not need visual rendering. It is also coherent with the DOM and XSL to be able to select elements by more complex requests than those allowed by CSS 2. What cannot be done using CSS 2 selectors will be possible using DOM. Example : select the n-th paragraph P contained in a DIV in preorder traversal of the subtree that DIV is the root of... I don't think that selectors general syntax will ever be able to express such a selection in a simple and readable way.

Important note: the following text is directly adapted from the CSS 2 spec and my rewriting and additions are completely insignificant in comparison with the incredible job editors (Bert Bos, Håkon Wium Lie, Chris Lilley and Ian Jacobs, W3C) and contributors did on that document.

Selectors

A W3C selector represents a structure. This structure can be understood for instance as a condition (e.g. in a CSS rule) that determines which elements in the document tree are matched by this selector, or as a flat description of the HTML or XML fragment corresponding to that structure.

W3C selectors may range from simple element names to rich contextual representations.

The following table summarizes W3C selector syntax:

Pattern Meaning Described in section
* any element Universal selector
E an element of type E Type element selector
E[foo] an E element with the "foo" attribute set Attribute selectors
E[foo="warning"] an E element whose "foo" attribute value is exactly equal to "warning" Attribute selectors
E[foo~="warning"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning" Attribute selectors
E[lang|="en"] an E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors
E:root an E element, root of the document Structural pseudo-classes
E:first-child an E element, first child of its parent Structural pseudo-classes
E:not-first-child an E element, not the first child of its parent Structural pseudo-classes
E:last-child an E element, last child of its parent Structural pseudo-classes
E:not-last-child an E element, not the last child of its parent Structural pseudo-classes
E:first-of-type an E element, first sibling of its type Structural pseudo-classes
E:not-first-of-type an E element, not the first sibling of its type Structural pseudo-classes
E:last-of-type an E element, last sibling of its type Structural pseudo-classes
E:not-last-of-type an E element, not the last sibling of its type Structural pseudo-classes
E:only-of-type an E element, only sibling of its type Structural pseudo-classes
E:not-only-of-type an E element, not the only sibling of its type Structural pseudo-classes
E:only-child an E element, only child of its parent Structural pseudo-classes
E:not-only-child an E element, not the only child of its parent Structural pseudo-classes
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes
E:link
E:visited
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes
E:active
E:hover
E:focus
an E element during certain user actions The user action pseudo-classes
E:target an E element being the target of the refering URI containing a fragment identifier The target pseudo-class
E:lang(c) an element of type E in (human) language c (the document language specifies how language is determined) The :lang() pseudo-class
E:subject an E element that is a subject of the selector the current simple selectors belong to The subject element pseudo-class
E:first-line the first formatted line of an E element The :first-line pseudo-element
E:first-letter the first formatted letter of an E element The :first-letter pseudo-element
E:before generated content before an E element The :before pseudo-element
E:after generated content after an E element The :after pseudo-element
E.warning HTML only. The same as E[class~="warning"]. Class selectors
E#myid an E element, its ID being equal to "myid". ID selectors
E"foo" an E element containing substring foo in its textual contents Content selector
E F an F element descendant of an E element Descendant combinator
E > F an F element child of an element E Child combinator
E + F an F element immediately preceded by an element E Direct adjacent combinator
E ~ F an F element preceded by an element E Indirect adjacent combinator

Example : in CSS, the meaning of each selector is derivated from the table above prepending "matches" to the contents of each cell of the "Meaning" column.

Character set

The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive.

Selector syntax

A selector is a chain of one or more sequences of simple selectors separated by combinators.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begin with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, ID selector, content selector, pseudo-class or pseudo-element.

Combinators are: whitespace, ">", "+" and "~". Whitespace may appear between a combinator and the simple selectors around it.

The subjects of the selector are the most important elements represented by the selector. By default, the subjects of a selector are the elements represented by the last sequence of simple selectors in the selector. The :subject pseudo-class can modify this default behavior.

Examples:

The following selector represents a list item LI unique child of an ordered list OL:

OL > LI:only-child

but the following one represents an ordered list OL having a unique child, that child being a LI:

OL:subject > LI:only-child

The structures represented by these two selectors are the same, but the subjects of the selectors are not.

Simple selectors

Type selector

A type selector is the name of a document language element type. A type selector represents an instance of the element type in the document tree.

Example(s):

The following selector represents an H1 element in the document tree:

H1

Universal selector

The universal selector, written *, represents the name of any element type. It represent then any single element in the document tree.

If the universal selector is not the only component of a simple selector, the * may be omitted. For example:

Attribute selectors

W3C selectors allows to represent attributes attached to an element.

Representation of attributes and attribute values

Four different attribute selectors are available:

[att]
Represents the att attribute, whatever the value of the attribute.
[att=val]
Represents the att attribute, its value being exactly "val".
[att~=val]
Represents the att attribute, its value being a space-separated list of words, one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).
[att|=val]
Represents the att attribute, its value being a hyphen-separated list of words, beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the LANG attribute in HTML) as described in RFC 1766 ([RFC1766]).

Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.

Example(s):

For example, the following attribute selector represents a H1 element that carries the TITLE attribute, whatever its value:

H1[TITLE]

Example(s):

In the following example, the selector represents a SPAN element whose class attribute has exactly the value "example":

SPAN[class=example]

Multiple attribute selectors can be used to represent several attributes of an element, or even several times the same attribute.

Example(s):

Here, the selector represents a SPAN element whose hello attribute has exactly the value "Cleveland" and whose goddbye attribute has exactly the value "Columbus":

SPAN[hello="Cleveland"][goodbye="Columbus"]

Example(s):

The following selectors illustrate the differences between "=" and "~=". The first selector will represent, for example, the value "copyright copyleft copyeditor" for the rel attribute. The second selector will only represent a A with the href attribute having the exact value "http://www.w3.org/".

A[rel~="copyright"]
A[href="http://www.w3.org/"]

Example(s):

The following selector represents an arbitrary element for which the value of the lang attribute is "fr" (i.e., the language is French).

*[LANG=fr]

Example(s):

The following selector represent an arbitrary element for which the values of the lang attribute begins with "en", including "en", "en-US", and "en-cockney":

*[LANG|="en"]

Example(s):

Similarly, the following selectors represents a DIALOGUE element having two different values for the same attribute character:

DIALOGUE[character=romeo] 

DIALOGUE[character=juliet]

Default attribute values in DTDs

Attribute selectors represent attribute values in the document tree. Default attribute values may be defined in a DTD or elsewhere. W3C selectors should be implemented so that they work even if the default values are not included in the document tree.

Example(s):

For example, consider an element EXAMPLE with an attribute "notation" that has a default value of "decimal". The DTD fragment might be

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

If the selectors represent an EXAMPLE element when the value of the attribute is explicitely set:

EXAMPLE[notation=decimal]
EXAMPLE[notation=octal]

then to represent the case where this attribute is set by default, and not explicitly, the following selector might be used:

EXAMPLE

Class selectors

Working with HTML, authors may use the dot (.) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, DIV.value and DIV[class~=value] have the same meaning. The attribute value must immediately follow the ".".

Example(s):

For example, we can represent an arbitrary element with class~="pastoral" as follows:

*.pastoral
or just
.pastoral 

The following selector represents a H1 element with class~="pastoral":

H1.pastoral

Example(s):

For example, the following selector represents a P element whose class attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":

P.pastoral.marine

This selector represents a P with class="pastoral blue aqua marine" but does not with class="pastoral blue".

ID selectors

Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id"; XML applications may name ID attributes differently, but the same restriction applies.

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. W3C ID selectors represent an element instance based on its identifier. An ID selector contains a "#" immediately followed by the ID value.

Example(s):

The following ID selector represent the H1 element whose ID attribute has the value "chapter1":

H1#chapter1

The following selector represents the arbitrary element that has the ID value "z98y".

*#z98y

Note. In XML 1.0 [XML10], the information about which attribute contains an element's IDs is contained in a DTD. When parsing XML, UAs do not always read the DTD, and thus may not know what the ID of an element is. If a style sheet designer knows or suspects that this will be the case, he should use normal attribute selectors instead: [name=p371] instead of #p371. Of course, elements in XML 1.0 documents without a DTD do not have IDs at all.

Pseudo-classes

Pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always contains a colon (:) followed by the name of the pseudo-class and optionnally by a value between parenthesis.

Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (eventually omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element.

Dynamic pseudo-classes

Dynamic pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Dynamic pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.

Dynamic pseudo-classes do not appear in the document source or document tree.

The link pseudo-classes: :link and :visited

User agents commonly display unvisited links differently from previously visited ones. W3C selectors provide the pseudo-classes :link and :visited to distinguish them:

Note. After a certain amount of time, user agents may choose to return a visited link to the (unvisited) ':link' state.

The two states are mutually exclusive.

Example(s):

The following selector represents links carrying class external and already visited :

A.external:visited
The user action pseudo-classes :hover, :active, and :focus

Interactive user agents sometimes change the rendering in response to user actions. W3C selectors provide three pseudo-classes for the selection of an element the user is acting on.

These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.

Example(s):

A:link    /* unvisited links */
A:visited /* visited links   */
A:hover   /* user hovers     */
A:active  /* active links    */

Example(s):

An example of combining dynamic pseudo-classes:

A:focus
A:focus:hover

The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.

Note. An element can be both ':visited' and ':active' (or ':link' and ':active').

The target pseudo-class :target

Some URIs refer to a location within a resource. This kind of URI ends with "#" followed by an anchor identifier (called the fragment identifier).

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section_2 in a HTML document:

http://somesite.com/html/top.html#section_2

A target element can be represented by the :target pseudo-class:

DIV#foo > P.bar:target

represents a P carrying class bar child of a DIV with ID foo, this P being the target element of the refering URI.

Rules containing a :target pseudo-class have no effect in environments where the notion of target element is meaningless.

CSS example of use of the :target pseudo-class :

*:target { color : red }

*:target:before { content : url(target.png) }
The language pseudo-class :lang

If the document language specifies how the human language of an element is determined, it is possible to write selectors that represent an element based on its language. For example, in HTML [HTML40], the language is determined by a combination of the LANG attribute, the META element, and possibly by information from the protocol (such as HTTP headers). XML uses an attribute called XML:LANG, and there may be other document language-specific methods for determining the language.

The pseudo-class :lang(C) represents an element that is in language C. Here is a C language code as specified in HTML 4.0 [HTML40] and RFC 1766 [RFC1766]. It is matched the same way as for the '|=' operator.

Example(s):

The two following selectors represent an HTML document that is in French or German. The two next selectors represent Q quotations in an arbitrary element in French or German.

HTML:lang(fr)
HTML:lang(de)
:lang(fr) > Q
:lang(de) > Q

Structural pseudo-classes

W3C selectors introduce the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.

Note that standalone PCDATA are not counted when calculating the position of an element in the list of children of its parent. When calculating the position of an element in the list of children of its parent, the index numbering starts at 1.

:root pseudo-class

The :root pseudo-class represents an element that is the root of the document. In HTML 4, this is the HTML element. In XML, it is whatever is appropriate for the dtd/scheme/namespace for that XML document.

:first-child pseudo-class

The :first-child pseudo-class represents an element that is the first child of some other element.

Example(s):

In the following example, the selector represents a P element that is the first child of a DIV element:

DIV > P:first-child
This selector can represent the P inside the DIV of the following fragment:
<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>
but cannot represent the second P in the following fragment:
<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

The following two selectors are equivalent:

* > A:first-child   /* A is first child of any element */
A:first-child       /* Same */

:not-first-child pseudo-class

The :not-first-child pseudo-class represents an element that is not the first child of some other element.

Example(s):

The following selector represents all TD cells of a table row TR but the first one.

TR TD:not-first-child

:last-child pseudo-class

The :last-child pseudo-class represents an element that is the last child of some other element.

Example:

The following selector represents a list item LI, last child of an ordered list OL.

OL LI:last-child

:not-last-child pseudo-class

The :not-last-child pseudo-class represents an element that is not the last child of some other element.

Example:

The following selector represents all children but last one of a DIV.

DIV > *:not-last-child

:first-of-type pseudo-class

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

Example:

The following selector represents a definition title DT inside a definition list DL, this DT being the first of its type in the list of children of its parent element..

DL DT:first-of-type

It is a valid description for the two first DT in the following example but not for the third one:

<DL><DT>gigogne</DT>
<DD><DL><DT>fus&eacute;e</DT> <DD>multistage rocket</DD> <DT>table</DT> <DD>nest of tables</DD> </DL></DD> </DL>

:not-first-of-type pseudo-class

The :not-first-of-type pseudo-class represents an element that is not the first sibling of its type in the list of children of its parent element.

Example:

The following selector represents the all paragraphs P but the first, children of the body of a document.

BODY > P:not-first-of-type

:last-of-type pseudo-class

The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.

Example:

The following selector represents the last data cell TD of a table row.

TR > TD:last-of-type

:not-last-of-type pseudo-class

The :not-last-of-type pseudo-class represents an element that is not the last sibling of its type in the list of children of its parent element.

Example:

The following selector represents all paragraphs P but the last one that are children of a DIV.

DIV > P:not-last-of-type

:only-of-type pseudo-class

The :only-of-type pseudo-class represents an element that is the only sibling of its type in the list of children of its parent element.

Example:

The following selector represents an ADDRESS element, the only one of its type child of the body of the document.

BODY > ADDRESS:only-of-type

:not-only-of-type pseudo-class

The :not-only-of-type pseudo-class represents an element that is not the only sibling of its type in the list of children of its parent element.

Example:

The following selector represents a table row TR that contains more than one data cell TD.

TR:selected TD:not-only-of-type

:only-child pseudo-class

The :only-child pseudo-class represents an element that is the only child of its parent element.

Example:

The following selector represents an unordered list UL with only one child, this child being a list item LI.

UL:selected > LI:only-child

The :only-child pseudo-class has the same meaning than the pseudo-classes :first-child and :last-child applied together.

:not-only-child pseudo-class

The :not-only-child pseudo-class represents an element that is not the only child of its parent element.

Example:

The following selector represents a DIV with a child paragraph P and other children.

DIV:selected > P:not-only-child

:nth-of-type(n) pseudo-class

The :nth-of-type(n) pseudo-class notation represents an element that is the n-th element of its type in the list of children of its parent element.

:nth-of-type(1) and :first-of-type pseudo-classes have the same meaning.

Example:

The following selector represents the second table row TR of a table body TBODY.

TBODY > TR:nth-of-type(2)

:not-nth-of-type(n) pseudo-class

The :nth-of-type(n) pseudo-class notation represents an element that is not the n-th element of its type in the list of children of its parent element.

:not-nth-of-type(1) and :not-first-of-type pseudo-classes have the same meaning.

:nth-child(n) pseudo-class

The :nth-child(n) pseudo-class notation represents an element that is the n-th child of its parent element.

:nth-child(1) and :first-child pseudo-classes have the same meaning.

Example:

The following selector represents the second child of a DIV, whatever its type.

DIV > *:nth-child(2)

:not-nth-child(n) pseudo-class

The :nth-child(n) pseudo-class notation represents an element that is not the n-th child of its parent element.

:not-nth-child(1) and :not-first-child pseudo-classes have the same meaning.

Pseudo-elements

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide designers a way to refer to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).

A pseudo-element always contains a colon (:) followed by the name of the pseudo-element.

Pseudo-elements may only appear in the sequence of simple selectors that represents the subjects of the selector.

Pseudo-elements names are case-insensitive.

The :first-line pseudo-element

The :first-line pseudo-element describes the first formatted line of a paragraph.

The :first-line pseudo-element is similar to an inline-level element, but with certain restrictions, depending on usage.

The :first-line pseudo-element can only be attached to a block-level element.

The :first-letter pseudo-element

The :first-letter pseudo-element describes the first formetted letter of a paragraph

The :first-letter pseudo-element is similar to an inline-level element if its CSS 'float' property is 'none', but with certain restrictions, depending on usage.

The :first-letter pseudo-element can be attached to all elements.

The :before and :after pseudo-elements

The :before and :after pseudo-elements can be used to describe generated content before or after an element's content.

When the :first-letter and :first-line pseudo-elements are combined with :before and :after, they apply to the first letter or line of the element including the inserted text.

Content selectors

A content selector represents a substring of the textual contents of an element. Such a selector is described by a character string between quotes or double-quotes.

The textual contents of a given element is determined by the concatenation of all PCDATA contained in the element and sub-elements.

Example:

P"Markup"

is a correct and valid, but partial, description of:

<P><STRONG>H</STRONG>yper<STRONG>t</STRONG>ext
   <STRONG>M</STRONG><EM>arkup</EM>
<STRONG>L</STRONG>anguage</P>

Special characters can be inserted in a content selector using the escape mechanism for unicode characters and carriage returns.

Combinators

Descendant combinator

At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an EM elements that is contained by an H1 element"). Descendant combinators express such a relationship. A descendant combinator is a whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.

Example(s):

For example, consider the following selector:

H1 EM 

It is a correct and valid, but partial, description of the following fragment:

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>

The following selector:

DIV * P 

represents a P element that is a grandchild or later descendant of a DIV element. Note the whitespace on either side of the "*".

The following selector, which combines descendant combinators and attribute selectors, represents an element that (1) has the HREF attribute set and (2) is inside a P that is itself inside a DIV:

DIV P *[href]

Child combinators

A child combinator describes a childhood relationship between two elements. A child combinator is made of the ">" character and separates two sequences of simple selectors.

Example(s):

The following selector represents a P element that is child of BODY:

BODY > P

Example(s):

The following example combines descendant combinators and child combinators.

DIV OL>LI P

It represents a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional whitespace around the ">" combinator has been left out.

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

Adjacent sibling combinators

There are two different adjacent sibling combinators : direct adjacent combinator and indirect adjacent combinator.

Direct adjacent combinators

Direct adjacent combinators are made of the "+" character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

Example(s):

Thus, the following selector represents a P element immediately following a MATH element:

MATH + P

Example(s):

The following selector is similar to the one in the previous example, except that it adds an attribute selector. Thus, it adds a constraint to the H1 element that must have class="opener":

H1.opener + H2

Indirect adjacent combinator

Indirect adjacent combinators are made of the "~" character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

Example(s):

H1 ~ PRE

represents a PRE element following a H1. It is a correct and valid, but partial, description of:

<H1>section title</H1>
<P>This paragraphe describes a piece of code</P>
<PRE>function a(x) = 1/X</PRE>  

Profiles

Each W3C specification using W3C selectors must define the subset of W3C selectors it allows and excludes, and describe the local meaning of all the components of that subset.

Non normative examples:

W3C Selectors profile
Specification CSS level 1
Accepts

type selectors
class selectors
ID selectors
:link, :visited and :active pseudo-classes
descendant combinator
:first-line and :first-letter pseudo-elements

Excludes

universal selector
attribute selectors
:hover, :focus, :lang(), :subject and :target pseudo-classes
structural pseudo-classes
content selectors
child combinator
adjacent direct combinator
adjacent indirect combinator
:before and :after pseudo-elements

Extra constraints - none -

 

W3C Selectors profile
Specification CSS level 2
Accepts

type selectors
universal selector
attribute selectors
class selectors
ID selectors
:link, :visited, :active, :hover, :focus, :lang() and :first-child pseudo-classes
descendant combinator
child combinator
adjacent direct combinator
all pseudo-elements

Excludes

content selectors
structural pseudo-classes other than :first-child
:subject and :target pseudo-classes
adjacent indirect combinator

Extra constraints - none -

In CSS, selectors express pattern matching rules that determine which style rules apply to elements in the document tree.

The following selector (CSS level 2) will match all anchors A with attribute NAME set inside a section 1 header H1:

H1 A[NAME]

All CSS declarations attached to such a selector are applied to elements matching it.

Non normative example:

W3C Selectors profile
Specification STTS
Accepts

all but excluded simple selectors

Excludes pseudo-elements
dynamic pseudo-classes
:target pseudo-class
Extra constraints

some selectors and combinators are not allowed in fragment descriptions on the right side of STTS declarations.

W3C selectors can be used in STTS in two different manners:

  1. a selection mechanism equivalent to CSS selection mechanism : declarations attached to a given selector are applied to elements matching that selector,
  2. fragment descriptions that appear on the right side of declarations; restriction : selectors and combinators introducing ambiguity about the represented structure (descendant combinator for instance) are not allowed in fragment descriptions.

Changes from previous version

Future work

Parts of some other CSS+FP WG Working Drafts or internal drafts may be in the future agregated to the current document :

The Character Set section also needs to be extended. Two possibilities : add a link to "CSS 3 Module 1 : General Syntax" that will include this information, or add the information to this module.

The part of the CSS grammar dealing with selectors may also be added to this module.


References

  1. [CSS] Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs ; "Cascading Style Sheets, level 2", W3C Recommandation, 12 May 1998 (http://www.w3.org/TR/REC-CSS2)
  2. [STTS3] Daniel Glazman ; "Simple Tree Transformation Sheets 3", Electricité de France, submission to the W3C, 11 Nov 1998 (http://www.w3.org/TR/NOTE-STTS3)
  3. [ACTIONS] Vidur Apparao, Brendan Eich, Ramanathan Guha, Nisheeth Ranjan ; "Action Sheets : a Modular Way of Defining Behavior for XML and HTML", Netscape Communications Corp., submission to the W3C, 19 June 1998 (http://www.w3.org/TR/NOTE-AS)