Selectors Level 3
Selectors Level 3
W3C Candidate Recommendation 30 January 2018
This version:
Latest version:
Previous version:
Latest version of Selectors
Feedback:
File an
issue on GitHub
Editors:
Tantek Çelik
(Invited Expert)
Elika J. Etemad
(Invited Expert)
Daniel Glazman
(Disruptive
Innovations SARL)
Ian
Hickson
Google
Peter Linss
(former editor,
Netscape/AOL
John Williams
(former editor,
Quark, Inc.
W3C
MIT
ERCIM
Keio
Beihang
). W3C
liability
trademark
and
document use
rules apply.
Abstract
Selectors
are patterns that match
against elements in a tree, and as such form one of several technologies
that can be used to select nodes in an XML document. Selectors have been
optimized for use with HTML and XML, and are designed to be usable in
performance-critical code.
CSS
(Cascading Style
Sheets) is a language for describing the rendering of
HTML
and
XML
documents on screen, on
paper, in speech, etc. CSS uses Selectors for binding style properties to
elements in the document.
This document describes the selectors that already exist in
CSS1
[CSS1]
and
CSS2
[CSS21]
, and further introduces new
selectors for
CSS3
and other languages
that may need them.
Selectors define the following function:
expression ∗ element → boolean
That is, given an element and a selector, this specification defines
whether that element matches the selector.
These expressions can also be used, for instance, to select a set of
elements, or a single element from a set of elements, by evaluating the
expression across all the elements in a subtree.
STTS
(Simple Tree
Transformation Sheets), a language for transforming XML trees, uses this
mechanism.
[STTS3]
Status of this document
This section describes the status of this document at the time of
its publication. Other documents may supersede this document. A list
of current W3C publications and the latest revision of this technical
report can be found in the
W3C
technical reports index
at https://www.w3.org/TR/.
This Candidate Recommendation is identical to the
29 September 2011 W3C Recommendation
except that the
errata
have been incorporated, as noted in the
changes section
One of these is a technical change; a
test
is available for that change, and is
passed by two or more implementations
Publication as a Candidate Recommendation does not imply endorsement by
the W3C Membership. This is a draft document and may be updated, replaced
or obsoleted by other documents at any time. It is inappropriate to cite
this document as other than work in progress.
This document was produced by the
CSS Working Group
as a
Candidate
Recommendation.
A Candidate Recommendation is a document that has been widely reviewed
and is ready for implementation. W3C encourages everybody to implement
this specification and return comments as
GitHub issues
by 28 February 2018.
All issues and comments are
archived
and there is also a
historical
archive
This document was produced by a group operating under the
W3C Patent Policy
. W3C maintains a
public list of any patent disclosures
made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains
Essential
Claim(s)
must disclose the information in accordance
with
section
6 of the W3C Patent Policy
This document is governed by the
1 March 2017
W3C Process Document
A separate
test
suite
and
implementation report
is available.
1.
Introduction
Selectors Level 1 and Selectors Level 2 are defined as the subsets of
selector functionality defined in the
CSS1
and
CSS2.1
specifications,
respectively.
1.1.
Dependencies
Some features of this specification are specific to CSS, or have
particular limitations or rules specific to CSS. In this specification,
these have been described in terms of CSS2.1.
[CSS21]
1.2.
Terminology
All of the text of this specification is normative except examples,
notes, and sections explicitly marked as non-normative.
Additional terminology is defined in the
Definitions
section of
[CSS21]
. Examples of
document source code and fragments are given in XML
[XML10]
or HTML
[HTML401]
[HTML5]
syntax.
1.3.
Changes from CSS2
This section is non-normative.
The main differences between the selectors in CSS2 and those in
Selectors are:
the list of basic definitions (selector, group of selectors, simple
selector, etc.) has been changed; in particular, what was referred to in
CSS2 as a simple selector is now called a sequence of simple selectors,
and the term "simple selector" is now used for the components of this
sequence
an optional namespace component is now allowed in element type
selectors, the universal selector and attribute selectors
new combinator
has been
introduced
new simple selectors including substring matching attribute selectors,
and new pseudo-classes
new pseudo-elements, and introduction of the "::" convention for
pseudo-elements
the grammar has been rewritten
profiles to be added to specifications integrating Selectors and
defining the set of selectors which is actually supported by each
specification
Selectors are now a CSS3 Module and an independent specification;
other specifications can now refer to this document independently of CSS
the specification now has its own test suite
2.
Selectors
This section is non-normative, as it merely summarizes the following
sections.
A Selector represents a structure. This structure can be used as a
condition (e.g. in a CSS rule) that determines which elements a selector
matches in the document tree, or as a flat description of the HTML or XML
fragment corresponding to that structure.
Selectors may range from simple element names to rich contextual
representations.
The following table summarizes the Selector syntax:
Pattern
Represents
Description
Level
any element
Universal selector
an element of type E
Type selector
E[foo]
an E element with a "foo" attribute
Attribute
selectors
E[foo="bar"]
an E element whose "foo" attribute value is exactly
equal to "bar"
Attribute
selectors
E[foo~="bar"]
an E element whose "foo" attribute value is a list of
whitespace-separated values, one of which is exactly equal to "bar"
Attribute
selectors
E[foo^="bar"]
an E element whose "foo" attribute value begins
exactly with the string "bar"
Attribute
selectors
E[foo$="bar"]
an E element whose "foo" attribute value ends exactly
with the string "bar"
Attribute
selectors
E[foo*="bar"]
an E element whose "foo" attribute value contains the
substring "bar"
Attribute
selectors
E[foo|="en"]
an E element whose "foo" 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:nth-child(n)
an E element, the n-th child of its parent
Structural
pseudo-classes
E:nth-last-child(n)
an E element, the n-th child of its parent, counting
from the last one
Structural
pseudo-classes
E:nth-of-type(n)
an E element, the n-th sibling of its type
Structural
pseudo-classes
E:nth-last-of-type(n)
an E element, the n-th sibling of its type, counting
from the last one
Structural
pseudo-classes
E:first-child
an E element, first child of its parent
Structural
pseudo-classes
E:last-child
an E element, last child of its parent
Structural
pseudo-classes
E:first-of-type
an E element, first sibling of its type
Structural
pseudo-classes
E:last-of-type
an E element, last sibling of its type
Structural
pseudo-classes
E:only-child
an E element, only child of its parent
Structural
pseudo-classes
E:only-of-type
an E element, only sibling of its type
Structural
pseudo-classes
E:empty
an E element that has no children (including text
nodes)
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
1 and 2
E:target
an E element being the target of the referring URI
The target pseudo-class
E:lang(fr)
an element of type E in language "fr" (the document
language specifies how language is determined)
The :lang() pseudo-class
E:enabled
E:disabled
a user interface element E which is enabled or
disabled
The UI element states
pseudo-classes
E:checked
a user interface element E which is
checked
(for instance a
radio-button or checkbox)
The UI element states
pseudo-classes
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
an E element whose class is "warning" (the document
language specifies how class is determined).
Class selectors
E#myid
an E element with ID equal to "myid".
ID selectors
E:not(s)
an E element that does not match simple selector s
Negation pseudo-class
E F
an F element descendant of an E element
Descendant
combinator
E > F
an F element child of an E element
Child combinator
E + F
an F element immediately preceded by an E element
Next-sibling
combinator
E ~ F
an F element preceded by an E element
Subsequent-sibling combinator
3.
Case sensitivity
All Selectors syntax is case-insensitive within the ASCII range (i.e.
[a-z] and [A-Z] are equivalent), except for parts that are not under the
control of Selectors. The case sensitivity of document language element
names, attribute names, and attribute values in selectors depends on the
document language. For example, in HTML, element names are
case-insensitive, but in XML, they are case-sensitive. Case sensitivity of
namespace prefixes is defined in
[CSS3NAMESPACE]
4.
Selector syntax
selector
is a chain of one or more
sequences of simple selectors
separated by
combinators
. One
pseudo-element
may be appended to the last
sequence of simple selectors in a selector.
sequence of
simple selectors
is a chain of
simple selectors
that are not separated
by a
combinator
. It always begins with a
type selector
or a
universal selector
. No other type selector
or universal selector is allowed in the sequence.
simple selector
is either a
type selector
universal selector
attribute selector
class selector
ID
selector
, or
pseudo-class
Combinators
are: whitespace,
"greater-than sign" (U+003E,
), "plus
sign" (U+002B,
) and "tilde" (U+007E,
). White space may appear between a combinator and the
simple selectors around it.
Only the characters
"space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return"
(U+000D), and "form feed" (U+000C) can occur in whitespace. Other
space-like characters, such as "em-space" (U+2003) and "ideographic space"
(U+3000), are never part of whitespace.
The elements of a document tree that are represented by a selector are
the
subjects of the
selector
. A selector consisting of a single sequence of simple
selectors represents any element satisfying its requirements. Prepending
another sequence of simple selectors and a combinator to a sequence
imposes additional matching constraints, so the subjects of a selector are
always a subset of the elements represented by the last sequence of simple
selectors.
An empty selector, containing no sequence of simple selectors and no
pseudo-element, is an
invalid selector
Characters in Selectors can be escaped with a backslash according to the
same
escaping
rules
as CSS.
[CSS21]
Certain selectors support namespace prefixes. The mechanism by
which namespace prefixes are
declared
should be
specified by the language that uses Selectors. If the language does not
specify a namespace prefix declaration mechanism, then no prefixes are
declared. In CSS, namespace prefixes are declared with the
@namespace
rule.
[CSS3NAMESPACE]
5.
Groups of selectors
A comma-separated list of selectors represents the union of all elements
selected by each of the individual selectors in the list. (A comma is
U+002C.) For example, in CSS when several selectors share the same
declarations, they may be grouped into a comma-separated list. White space
may appear before and/or after the comma.
CSS example:
In this example, we condense three rules with identical declarations
into one. Thus,
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
is equivalent to:
h1, h2, h3 { font-family: sans-serif }
Warning
: the equivalence is true in this example
because all the selectors are valid selectors. If just one of these
selectors were invalid, the entire group of selectors would be invalid.
This would invalidate the rule for all three heading elements, whereas in
the former case only one of the three individual heading rules would be
invalidated.
Invalid CSS example:
h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }
is not equivalent to:
h1, h2..foo, h3 { font-family: sans-serif }
because the above selector (
h1, h2..foo, h3
) is entirely
invalid and the entire style rule is dropped. (When the selectors are not
grouped, only the rule for
h2..foo
is dropped.)
6.
Simple selectors
6.1.
Type selector
type selector
is the name of a document
language element type written using the syntax of
CSS qualified
names
[CSS3NAMESPACE]
. A
type selector represents an instance of the element type in the document
tree.
Example:
The following selector represents an
h1
element in the
document tree:
h1
6.1.1.
Type selectors and
namespaces
Type selectors allow an optional namespace component: a namespace prefix
that has been previously
declared
may be prepended
to the element name separated by the namespace separator "vertical
bar" (U+007C,
). (See, e.g.,
[XML-NAMES]
for the use of
namespaces in XML.)
The namespace component may be left empty (no prefix before the
namespace separator) to indicate that the selector is only to represent
elements with no namespace.
An asterisk may be used for the namespace prefix, indicating that the
selector represents elements in any namespace (including elements with no
namespace).
Element type selectors that have no namespace component (no namespace
separator) represent elements without regard to the element's namespace
(equivalent to "
*|
") unless a default namespace has been
declared
for namespaced selectors (e.g. in CSS, in the
style sheet). If a default namespace has been declared, such selectors
will represent only elements in the default namespace.
A type selector containing a namespace prefix that has not been
previously
declared
for namespaced selectors is an
invalid
selector.
In a namespace-aware client, the name part of element type selectors
(the part after the namespace separator, if it is present) will only match
against the
local part
of
the element's
qualified
name
In summary:
ns|E
elements with name E in namespace ns
*|E
elements with name E in any namespace, including those without a
namespace
|E
elements with name E without a namespace
if no default namespace has been
declared
for
selectors, this is equivalent to *|E. Otherwise it is equivalent to ns|E
where ns is the default namespace.
CSS examples:
@namespace foo url(http://www.example.com);
foo|h1 { color: blue } /* first rule */
foo|* { color: yellow } /* second rule */
|h1 { color: red } /* ...*/
*|h1 { color: green }
h1 { color: green }
The first rule (not counting the
@namespace
at-rule) will
match only
h1
elements in the "http://www.example.com"
namespace.
The second rule will match all elements in the "http://www.example.com"
namespace.
The third rule will match only
h1
elements with no
namespace.
The fourth rule will match
h1
elements in any namespace
(including those without any namespace).
The last rule is equivalent to the fourth rule because no default
namespace has been defined.
6.2.
Universal selector
The
universal selector
, written as a
CSS qualified
name
[CSS3NAMESPACE]
with an asterisk (
U+002A) as the local name, represents the qualified name of
any element type. It represents any single element in the document tree in
any namespace (including those without a namespace) if no default
namespace has been specified for selectors. If a default namespace has
been specified, see
Universal selector and
Namespaces
below.
If a universal selector represented by
(i.e. without a
namespace prefix) is not the only component of a
sequence of simple selectors
selectors or is
immediately followed by a
pseudo-element
then the
may be omitted and the universal selector's
presence implied.
Examples:
*[hreflang|=en]
and
[hreflang|=en]
are
equivalent,
*.warning
and
.warning
are equivalent,
*#myid
and
#myid
are equivalent.
Note:
it is recommended that the
not be omitted, because it decreases the potential
confusion between, for example,
div
:first-child
and
div:first-child
. Here,
div *:first-child
is more readable.
6.2.1.
Universal selector and
namespaces
The universal selector allows an optional namespace component. It is
used as follows:
ns|*
all elements in namespace ns
*|*
all elements
|*
all elements without a namespace
if no default namespace has been specified, this is equivalent to *|*.
Otherwise it is equivalent to ns|* where ns is the default namespace.
A universal selector containing a namespace prefix that has not been
previously
declared
is an
invalid
selector.
6.3.
Attribute
selectors
Selectors allow the representation of an element’s attributes. When a
selector is used as an expression to match against an element, attribute
selectors must be considered to match an element if that element has an
attribute that matches the attribute represented by the attribute
selector.
6.3.1.
Attribute
presence and value selectors
CSS2 introduced four attribute selectors:
[att]
Represents an element with the
att
attribute, whatever
the value of the attribute.
[att=val]
Represents an element with the
att
attribute whose value
is exactly "val".
[att~=val]
Represents an element with the
att
attribute whose value
is a
whitespace
-separated list of words, one of
which is exactly "val". If "val" contains whitespace, it will never
represent anything (since the words are
separated
by spaces).
Also if "val" is the empty string, it will never represent anything.
[att|=val]
Represents an element with the
att
attribute, its value
either being exactly "val" or beginning with "val" immediately followed
by "-" (U+002D). This is primarily intended to allow language subcode
matches (e.g., the
hreflang
attribute on the
element in HTML) as described in BCP 47 (
[BCP47]
) or its successor. For
lang
(or
xml:lang
) language subcode matching,
please see
the
:lang
pseudo-class
Attribute values must be CSS
identifiers
or
strings
[CSS21]
The case-sensitivity of
attribute names and values in selectors depends on the document language.
Examples:
The following attribute selector represents an
h1
element
that carries the
title
attribute, whatever its value:
h1[title]
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 several conditions on the same attribute.
Here, the selector represents a
span
element whose
hello
attribute has exactly the value "Cleveland" and whose
goodbye
attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"]
The following CSS rules illustrate the differences between "=" and
"~=". The first selector would match, for example, an
element with the value "copyright copyleft copyeditor" on a
rel
attribute. The second selector would only match an
element with an
href
attribute having the
exact value "http://www.w3.org/".
a[rel~="copyright"] { ... }
a[href="http://www.w3.org/"] { ... }
The following selector represents an
element whose
hreflang
attribute is exactly "fr".
a[hreflang=fr]
The following selector represents an
element for which
the value of the
hreflang
attribute begins with "en",
including "en", "en-US", and "en-scouse":
a[hreflang|="en"]
The following selectors represent a
DIALOGUE
element
whenever it has one of two different values for an attribute
character
DIALOGUE[character=romeo]
DIALOGUE[character=juliet]
6.3.2.
Substring
matching attribute selectors
Three additional attribute selectors are provided for matching
substrings in the value of an attribute:
[att^=val]
Represents an element with the
att
attribute whose value
begins with the prefix "val". If "val" is the empty string then the
selector does not represent anything.
[att$=val]
Represents an element with the
att
attribute whose value
ends with the suffix "val". If "val" is the empty string then the
selector does not represent anything.
[att*=val]
Represents an element with the
att
attribute whose value
contains at least one instance of the substring "val". If "val" is the
empty string then the selector does not represent anything.
Attribute values must be CSS
identifiers
or
strings
[CSS21]
The case-sensitivity of
attribute names in selectors depends on the document language.
Examples:
The following selector represents an HTML
object
referencing an image:
object[type^="image/"]
The following selector represents an HTML anchor
with an
href
attribute whose value ends with ".html".
a[href$=".html"]
The following selector represents an HTML paragraph with a
title
attribute whose value contains the substring "hello"
p[title*="hello"]
6.3.3.
Attribute selectors and
namespaces
The attribute name in an attribute selector is given as a
CSS qualified
name
: a namespace prefix that has been previously
declared
may be prepended to the attribute name
separated by the namespace separator "vertical bar"
). In keeping with the Namespaces in the XML
recommendation, default namespaces do not apply to attributes, therefore
attribute selectors without a namespace component apply only to attributes
that have no namespace (equivalent to "
|attr
"). An asterisk
may be used for the namespace prefix indicating that the selector is to
match all attribute names without regard to the attribute's namespace.
An attribute selector with an attribute name containing a namespace
prefix that has not been previously
declared
is an
invalid
selector.
CSS examples:
@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }
The first rule will match only elements with the attribute
att
in the "http://www.example.com" namespace with the value
"val".
The second rule will match only elements with the attribute
att
regardless of the namespace of the attribute (including
no namespace).
The last two rules are equivalent and will match only elements with the
attribute
att
where the attribute is not in a namespace.
6.3.4.
Default attribute values
in DTDs
Attribute selectors represent attribute values in the document tree. How
that document tree is constructed is outside the scope of Selectors. In
some document formats default attribute values can be defined in a DTD or
elsewhere, but these can only be selected by attribute selectors if they
appear in the document tree. Selectors should be designed so that they
work whether or not the default values are included in the document tree.
For example, a XML UA may, but is
not
required to read an
"external subset" of the DTD but
is
required to look for default
attribute values in the document's "internal subset." (See, e.g.,
[XML10]
for definitions of these
subsets.) Depending on the UA, a default attribute value defined in the
external subset of the DTD might or might not appear in the document tree.
A UA that recognizes an XML namespace may, but is not required to use
its knowledge of that namespace to treat default attribute values as if
they were present in the document. (For example, an XHTML UA is not
required to use its built-in knowledge of the XHTML DTD. See, e.g.,
[XML-NAMES]
for details on
namespaces in XML 1.0.)
Note:
Typically, implementations choose to
ignore external subsets. This corresponds to the behaviour of
non-validating processors as defined by the XML specification.
Example:
Consider an element
EXAMPLE
with an attribute
radix
that has a default value of
"decimal"
The DTD fragment might be

If the style sheet contains the rules
EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
EXAMPLE[radix=octal] { /*... other settings...*/ }
the first rule might not match elements whose
radix
attribute is set by default, i.e. not set explicitly. To catch all cases,
the attribute selector for the default value must be dropped:
EXAMPLE { /*... default property settings ...*/ }
EXAMPLE[radix=octal] { /*... other settings...*/ }
Here, because the selector
EXAMPLE[radix=octal]
is more
specific than the type selector alone, the style declarations in the
second rule will override those in the first for elements that have a
radix
attribute value of
"octal"
. Care has to
be taken that all property declarations that are to apply only to the
default case are overridden in the non-default cases' style rules.
6.4.
Class selectors
Working with HTML, authors may use the "period" notation (also known as
"full stop", U+002E,
) 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 full stop (
).
UAs may apply selectors using the period (.) notation in XML documents
if the UA has namespace-specific knowledge that allows it to determine
which attribute is the "class" attribute for the respective namespace. One
such example of namespace-specific knowledge is the prose in the
specification for a particular namespace (e.g. SVG 1.1
[SVG11]
describes the
SVG
class
attribute
and how a UA should interpret it, and
similarly MathML
[MATHML3]
describes the
MathML
class
attribute
.)
CSS examples:
We can assign style information to all elements with
class~="pastoral"
as follows:
*.pastoral { color: green } /* all elements with class~=pastoral */
or just
.pastoral { color: green } /* all elements with class~=pastoral */
The following assigns style only to H1 elements with
class~="pastoral"
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
Given these rules, the first
H1
instance below would not
have green text, while the second would:

Not green

Very green

Je suis français.

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
When the value
is preceded by a negative sign, the "+"
character in the expression must be removed (it is effectively replaced by
the "-" character indicating the negative value of
).
Examples:
:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
:nth-child(10n+9) /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
When
=0, the
part need not be
included (unless the
part is already omitted). When
is not included and
is
non-negative, the
sign before
(when allowed)
may also be omitted. In this case the syntax simplifies to
:nth-child(
Examples:
foo:nth-child(0n+5) /* represents an element foo that is the 5th child
of its parent element */
foo:nth-child(5) /* same */
When
=1, or
=-1, the
may be
omitted from the rule.
Examples:
The following selectors are therefore equivalent:
bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
bar:nth-child(n+0) /* same */
bar:nth-child(n) /* same */
bar /* same but lower specificity (0,0,1) */
If
=0, then every
th element is picked. In such
a case, the +
(or -
) part may be omitted unless
the
part is already omitted.
Examples:
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(2n) /* same */
Whitespace is permitted after the "(", before the ")", and on either
side of the "+" or "-" that separates the
and
parts when both are present.
Valid Examples with white space:
:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )
Invalid Examples with white space:
:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)
If both
and
are equal to zero, the
pseudo-class represents no element in the document tree.
The value
can be negative, but only the positive values of
, for
≥0, may
represent an element in the document tree.
Example:
html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */
6.6.5.3.
:nth-last-child() pseudo-class
The
:nth-last-child(
n+
pseudo-class notation represents an element that has
-1 siblings
after
it in the document tree, for
any positive integer or zero value of
. It is not required
to have a parent. See
:nth-child()
pseudo-class for
the syntax of its argument. It also accepts the ‘
even
’ and ‘
odd
’ values as arguments.
Examples:
tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */

foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
counting from the last one */
6.6.5.4.
:nth-of-type()
pseudo-class
The
:nth-of-type(
n+
pseudo-class notation represents an element that has
-1 siblings with the same expanded
element name
before
it in the
document tree, for any zero or positive integer value of
It is not required to have a parent. See
:nth-child()
pseudo-class for
the syntax of its argument. It also accepts the ‘
even
’ and ‘
odd
’ values.
CSS example:
This allows an author to alternate the position of floated images:
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
6.6.5.5.
:nth-last-of-type() pseudo-class
The
:nth-last-of-type(
n+
pseudo-class notation represents an element that has
-1 siblings with the same expanded
element name
after
it in the
document tree, for any zero or positive integer value of
It is not required to have a parent. See
:nth-child()
pseudo-class for
the syntax of its argument. It also accepts the ‘
even
’ and ‘
odd
’ values.
Example:
To represent all
h2
children of an XHTML
body
except the first and last, one could use the following selector:
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
In this case, one could also use
:not()
, although the
selector ends up being just as long:
body > h2:not(:first-of-type):not(:last-of-type)
6.6.5.6.
:first-child
pseudo-class
Same as
:nth-child(1)
. The
:first-child
pseudo-class
represents an element that is first in a list of siblings.
Examples:
The following selector represents a
element that is the
first child of a
div
element:
div > p:first-child
This selector can represent the
inside the
div
of the following fragment:

The last P before the note.

The last P before the note.

gigogne

fusée

multistage rocket

table

nest of tables

This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.

This is a somewhat long HTML
paragraph that

will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.

This is a somewhat long HTML
paragraph that will be broken into several
lines.

The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.

This is a
somewhat long HTML
paragraph that will



be
broken into several
lines.

The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.

First...
doesn't contain any letters (assuming the default style for
br
in HTML 4). The word "First" is not on the first formatted
line.
A UA should act as if the fictional start tags of the
::first-line
pseudo-elements were
nested just inside the innermost enclosing block-level element. (Since
CSS1 and CSS2 were silent on this case, authors should not rely on this
behavior.) For example, the fictional tag sequence for

‘T...
, the UA may
create a
::first-letter
pseudo-element from one of the elements, both elements, or simply not
create a pseudo-element.
Similarly, if the first letter(s) of the block are not at the start of
the line (for example due to bidirectional reordering), then the UA need
not create the pseudo-element(s).
Example:
The following CSS and HTML example
illustrates how overlapping pseudo-elements may interact. The first
letter of each P element will be green with a font size of ‘
24pt
’. The rest of the first formatted line will be
blue
’ while the rest of the paragraph
will be ‘
red
’.
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }

function a(x) = 12x/13.5