Examples
Example selectors
tr:nth-child(2n+1)- Represents the odd rows of an HTML table.
-
:first-child selector.
span:nth-child(1)- Equivalent to the above.
6.6.5.4. :nth-of-type() pseudo-class
The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element. 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(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n, and has a parent element. 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 the first child of some other element.
Examples:
The following 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:
The last P before the note.
The first P inside the note.
but cannot represent the second p in the following fragment:
The last P before the note.
Note
The first P inside the note.
The following two selectors are usually equivalent:
* > a:first-child /* a is first child of any element */
a:first-child /* Same (assuming a is not the root element) */
6.6.5.7. :last-child pseudo-class
Same as :nth-last-child(1). 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 that is the last child of an ordered list ol.
ol > li:last-child
6.6.5.8. :first-of-type pseudo-class
Same as :nth-of-type(1). 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 first two dt elements in the following example but not for the third one:
- gigogne
-
- fusée
- multistage rocket
- table
- nest of tables
6.6.5.9. :last-of-type pseudo-class
Same as :nth-last-of-type(1). 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.
tr > td:last-of-type
6.6.5.10. :only-child pseudo-class
Represents an element that has a parent element and whose parent element has no other element children. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
6.6.5.11. :only-of-type pseudo-class
Represents an element that has a parent element and whose parent element has no other element children with the same expanded element name. Same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1), but with a lower specificity.
6.6.5.12. :empty pseudo-class
The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM [DOM-LEVEL-3-CORE] text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness; comments, processing instructions, and other nodes must not affect whether an element is considered empty or not.
Examples:
p:empty is a valid representation of the following fragment:
foo:empty is not a valid representation for the following fragments:
bar
bla
this is not :empty
6.6.6. Blank
This section intentionally left blank. (This section previously defined a :contains() pseudo-class.)
6.6.7. The negation pseudo-class
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
Negations may not be nested; :not(:not(...)) is invalid. Note also that since pseudo-elements are not simple selectors, they are not a valid argument to :not().
Examples:
The following selector matches all button elements in an HTML document that are not disabled.
Examples
Example selectors
tr:nth-child(2n+1)- Represents the odd rows of an HTML table.
-
:first-child selector.
span:nth-child(1)- Equivalent to the above.
span:nth-child(-n+3)- Three first span elements.
PiL Public Image Ltd. Tomorrow PiL 11 mins Tomorrow Doodah!
(First full YouTube 11 mins.)
tr:nth-child(odd) - Represents the odd rows of an HTML table.
tr:nth-child(2n)- Represents the even rows of an HTML table.
tr:nth-child(even)- Represents the even rows of an HTML table.
span:nth-child(0n+1)- Represents a span element which is the first child of its parent; this is the same as the
Examples:
button:not([DISABLED])
The following selector represents all but FOO elements.
*:not(FOO)
The following group of selectors represents all HTML elements except links.
html|*:not(:link):not(:visited)
Default namespace declarations do not affect the argument of the negation pseudo-class unless the argument is a universal selector or a type selector.
Examples:
Assuming that the default namespace is bound to "http://example.com/", the following selector represents all elements that are not in that namespace:
*|*:not(*)
The following selector matches any element that is not being hovered, regardless of its namespace. In particular, it is not limited to only matching elements in the default namespace that are not being hovered, and elements not in the default namespace don't match the rule when they are being hovered.
*|*:not(:hover)
