This pseudo-classes are so called structural pseudo-classes and selects based on the document tree but cannot be represented by other simple selectors. The index numbering starts at 1.
# Root
The :root pseudo-class matches the root element of a document. In HTML documents this is always the <html> element.
# Syntax
:root {
/* declarations */
}
# Example
:root {
background-color: gray;
}
In this example the root element <html> will get a gray background-color.
# Browser support
# Empty
The :empty pseudo-class matches any element that has no children. So its data length is greater than 0 whereas comments and processing instructions elements are ignored.
# Syntax
:empty {
/* declarations */
}
# Example
:empty {
border: 1px solid red;
}
Here, in this example, all empty elements will have a red, solid border.
Try example in CodePen# Browser support
# Last-Child
The :last-child pseudo-class will match the last child element of of its parent element. It's also the same as :nth-last-child(1).
This pseudo-class is part of the CSS3 specification while its "opposite" selector :first-child is part of CSS2.
# Syntax
:last-child {
/* declarations */
}
# Example
span:last-child {
background-color: gray;
}
This example code will select just the last element in the list of children of its parent element.
Try example in CodePen# Browser support
# Only-Child
The :only-child pseudo-class will select only elements which are the only child of its parent (element) and has no other children element(s). It's the same as :first-child:last-child.
# Syntax
:only-child {
/* declarations */
}
# Example
span:only-child {
background-color: gray;
color: white;
padding: 3px 6px;
}
Every child node which is the only child of its parent will have a gray background-color.
# Browser support
# First-Of-Type
The :first-of-type pseudo-class is going to match the first element of the (optionally specified) type. It's also the same as :nth-of-type(1).
# Syntax
:first-of-type {
/* declarations */
}
# Example
span:first-of-type {
background-color: gray;
}
This example code will select just the first <span> element in the list of children of its parent element and give it a gray background.
# Browser support
# Last-Of-Type
The :last-of-type pseudo-class is the opposite of :first-of-type and is going to match the last element of the (optionally specified) type. It's also the same as :nth-last-of-type(1).
# Syntax
:last-of-type {
/* declarations */
}
# Example
span:last-of-type {
background-color: gray;
}
This example code will select only the last <span> element of its parent element and give it a gray background.
# Browser support
# Only-Of-Type
The :only-of-type pseudo-class is going to match only elements which are the only child elements of its type.
# Syntax
:only-of-type {
/* declarations */
}
# Example
span:only-of-type {
background-color: gray;
}
This example is going to select only the first <span> and give it a gray background because it's the only element which is of that element type.
# Browser support
# Nth-Child
The :nth-child() pseudo-class will first split the elements into groups of a elements and then select any child element that is the bth child.
# Syntax
:nth-child(an+b) {
/* declarations */
}
# Example
p:nth-child(2n+1), /* is the same as */
p:nth-child(odd) {
background-color: gray;
}
This example will select every odd <p> and set a gray background.
# Browser support
# Nth-Last-Child
The :nth-last-child() pseudo-class behaves like :nth-child but with the difference that the siblings after it in the document tree will be selected.
# Syntax
:nth-last-child(an+b) {
/* declarations */
}
# Example
p:nth-last-child(2n+1) {
background-color: gray;
}
This example will select every even <p> and set a gray background.
# Browser support
# Nth-Of-Type
The :nth-of-type() pseudo-class behaves like :nth-child but with the difference that only elements with the same element name will be selected.
# Syntax
:nth-of-type(an+b) {
/* declarations */
}
# Example
p:nth-of-type(2n+1) {
background-color: gray;
}
This example will select every odd only <p> element and set a gray background.
# Browser support
# Nth-Last-Of-Type
The :nth-of-type() pseudo-class behaves like :nth-of-type but with the difference that the specified element siblings after it in the document tree will be selected.
# Syntax
:nth-last-of-type(an+b) {
/* declarations */
}
# Example
p:nth-last-of-type(2n+1) {
background-color: gray;
}
This example will select every even only <p> element and set a gray background.