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

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.

# Syntax

Copy
:root {
    /* declarations */
}

# Example

Copy
:root {
    background-color: gray;
}

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (1) Yes (1) Yes (12) Yes (9) Yes (9.5)

# Empty

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.

# Syntax

Copy
:empty {
    /* declarations */
}

# Example

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

0

Try example in CodePen

# Browser support

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

# Last-Child

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.

# Syntax

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

# Example

Copy
span:last-child {
    background-color: gray;
}

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# Only-Child

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.

# Syntax

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

# Example

Copy
span:only-child {
    background-color: gray;
    color: white;
    padding: 3px 6px;
}

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (1.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# First-Of-Type

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.

# Syntax

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

# Example

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

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# Last-Of-Type

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.

# Syntax

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

# Example

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

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# Only-Of-Type

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.

# Syntax

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

# Example

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

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# Nth-Child

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.

# 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;
}

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# Nth-Last-Child

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.

# Syntax

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

# Example

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

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# Nth-Of-Type

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.

# Syntax

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

# Example

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

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

# Nth-Last-Of-Type

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.

# Syntax

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

# Example

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

0

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (3.5) Yes (3.1) Yes (12) Yes (9) Yes (9.5)

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