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