CSS Selector Level 3 » Structural pseudo-class

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

Copy
:root {
    /* declarations */
}

# Example

Copy
:root {
    background-color: gray;
}

In this example will the root element <html> get a gray background-color.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (1.0) Yes (12.0) Yes (9.0) Yes (9.5)

# 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

Copy
:empty {
    /* declarations */
}

# Example

Copy
:empty {
    border: 1px solid red;
}

Here, in this example, will all empty elements have a red, solid border.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.5) Yes (3.1) Yes (12.0) No Yes (9.5)

# Last-Child

The :last-child pseudo-class will match the last child element of of it's 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

Copy
:last-child {
    /* declarations */
}

# Example

Copy
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

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.0) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# 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

Copy
:only-child {
    /* declarations */
}

# Example

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

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# First-Of-Type

The :first-of-type pseudo-class is going to match the first element of the (optional specified) type. It's also the same as :nth-of-type(1).

# Syntax

Copy
:first-of-type {
    /* declarations */
}

# Example

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

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# 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 (optional specified) type. It's also the same as :nth-last-of-type(1).

# Syntax

Copy
:last-of-type {
    /* declarations */
}

# Example

Copy
span:last-of-type {
    background-color: gray;
}

This example code will select only the last <span> element of its parent element.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# 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

Copy
:only-of-type {
    /* declarations */
}

# Example

Copy
span:only-of-type {
    background-color: gray;
}

This example is going to select only the first <span> because it's the only element which is of that element type.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# Nth-Child

The :nth-child() pseudo-class will split frist the elements into groups of a elements and then select any child element that is the bth child.

# Syntax

Copy
:nth-child(an+b) {
    /* declarations */
}

# Example

Copy
p:nth-child(2n+1), /* is the same as */
p:nth-child(odd) {
    background-color: gray;
}

This example will represent every odd <p> and set a gray background.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# 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

Copy
:nth-last-child(an+b) {
    /* declarations */
}

# Example

Copy
p:nth-last-child(2n+1) {
    background-color: gray;
}

This example will represent every even <p> and set a gray background.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# 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

Copy
:nth-of-type(an+b) {
    /* declarations */
}

# Example

Copy
p:nth-of-type(2n+1) {
    background-color: gray;
}

This example will represent every odd only <p> element and set a gray background.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

# 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

Copy
:nth-last-of-type(an+b) {
    /* declarations */
}

# Example

Copy
p:nth-last-of-type(2n+1) {
    background-color: gray;
}

This example will represent every even only <p> element and set a gray background.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.5) Yes (3.1) Yes (12.0) Yes (9.0) Yes (9.5)

Please wait a moment, the comments start loading now...
explorermozillachromesafariopera