You are here: Reference > CSS > selectors and pseudos > structural pseudo classes

Structural Pseudo-Classes

Pseudos:

Pseudo Support Description
:empty
9
Applies to elements that do not have any content.
:first-child
Applies to any element that is the first child of its parent.
:first-of-type
93.5
Applies to any element that is the first child of its type in its parent.
:last-child
9
Applies to any element that is the last child of its parent.
:last-of-type
93.5
Applies to any element that is the last child of its type in its parent.
:nth-child ()
93.5
Applies to any element that is the n-th child of its parent.
:nth-last-child ()
93.5
Applies to any element that is the n-th child of its parent, counting from the last one.
:nth-of-type ()
93.5
Applies to any element that is the n-th sibling of its type.
:nth-last-of-type ()
93.5
Applies to any element that is the n-th sibling of its type, counting from the last one.
:only-child
9
Applies to any element that is the only child of its parent.
:only-of-type
93.5
Applies to any element that is the only sibling of its type.
:root
9
Applies to the top-level element of a document.

:empty

9
Applies to elements that do not have any content.
<head>
    <style>
        a:empty {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <a></a>
</body>
Did you find this example helpful? yes no

Supported by tags:

:first-child

Applies to any element that is the first child of its parent.
<head>
    <style>
        div > b:first-child {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <b> first</b>
        <b> second</b>
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

:first-of-type

93.5
Applies to any element that is the first child of its type in its parent.
Note: The :first-of-type pseudo is supported in Firefox from version 3.5.
<head>
    <style>
        ol li:first-of-type {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <ol>
        <li> first</li>
        <li> second</li>
        <li> third</li>
    </ol>
</body>
Did you find this example helpful? yes no

Supported by tags:

:last-child

9
Applies to any element that is the last child of its parent.
<head>
    <style>
        div > b:last-child {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <b>first</b>
        <b> second</b>
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

:last-of-type

93.5
Applies to any element that is the last child of its type in its parent.
Note: The :last-of-type pseudo is supported in Firefox from version 3.5.
<head>
    <style>
        ol li:last-of-type {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <ol>
        <li> first</li>
        <li> second</li>
        <li> third</li>
    </ol>
</body>
Did you find this example helpful? yes no

Supported by tags:

:nth-child (selector)

93.5
Applies to any element that is the n-th child of its parent.
Note: The :nth-child pseudo is supported in Firefox from version 3.5.
The selector specifies the position of the element or elements in the childNodes collection that the style rules applies to. It can be an integer, a string ('even' or 'odd'), or an expression, such as 2n+1.

Possible values:
integer Specifies the position of the child.
even Applies to all even children of the element.
odd Applies to all odd children of the element.
expression The expression must contain the 'n' variable. For example, 2n+1 is all odd, and 2n is all even children of the element.
<head>
    <style>
        /* represents every odd row of an HTML table */
        tr:nth-child(2n+1) {
            color:red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>first row</td>
        </tr>
        <tr>
            <td>second row</td>
        </tr>
        <tr>
            <td>third row</td>
        </tr>
    </table>
</body>
Did you find this example helpful? yes no

Supported by tags:

:nth-last-child (selector)

93.5
Applies to any element that is the n-th child of its parent, counting from the last one.
Note: The :nth-last-child pseudo is supported in Firefox from version 3.5.
The selector specifies the position of the child or children relative to the last one that the style rules applies to. It can be an integer, a string ('even' or 'odd'), or an expression, such as 2n+1.

Possible values:
integer Specifies the position of the child relative to the last child.
even Applies to all even children of the element.
odd Applies to all odd children of the element.
expression The expression must contain the 'n' variable. For example, 2n+1 is all odd, and 2n is all even children of the element.
<head>
    <style>
        /* represents the last two row of an HTML table */
        tr:nth-last-child(-n+2) {
            color:red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>first row</td>
        </tr>
        <tr>
            <td>second row</td>
        </tr>
        <tr>
            <td>third row</td>
        </tr>
    </table>
</body>
Did you find this example helpful? yes no

Supported by tags:

:nth-of-type (selector)

93.5
Applies to any element that is the n-th sibling of its type.
Note: The :nth-of-type pseudo is supported in Firefox from version 3.5.
The selector specifies the position of the child or children of the specified type that the style rules applies to. It can be an integer, a string ('even' or 'odd'), or an expression, such as 2n+1.

Possible values:
integer Specifies the position of the child of the specified type.
even Applies to all even children of the element.
odd Applies to all odd children of the element.
expression The expression must contain the 'n' variable. For example, 2n+1 is all odd, and 2n is all even children of the element.
<head>
    <style>
        /* represents all the odd bold (b) tag */
        b:nth-of-type(odd) {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <b>first bold</b>
        <i> italic text </i>
        <b>second bold</b>
        <i> italic text </i><i> italic text </i>
        <b>third bold</b>
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

:nth-last-of-type (selector)

93.5
Applies to any element that is the n-th sibling of its type, counting from the last one.
Note: The :nth-last-of-type pseudo is supported in Firefox from version 3.5.
The selector specifies the position of the child or children of the specified type relative to the last one that the style rules applies to. It can be an integer, a string ('even' or 'odd'), or an expression, such as 2n+1.

Possible values:
integer Specifies the position of the child of the specified type relative of the last child.
even Applies to all even children of the element.
odd Applies to all odd children of the element.
expression The expression must contain the 'n' variable. For example, 2n+1 is all odd, and 2n is all even children of the element.
<head>
    <style>
        /* represents the last two bold (b) tag */
        tr:nth-last-child(-n+2) {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <b>first bold</b>
        <i> italic text </i>
        <b>second bold</b>
        <i> italic text </i><i> italic text </i>
        <b>third bold</b>
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

:only-child

9
Applies to any element that is the only child of its parent.
<head>
    <style>
        /* represents the bold (b) tag which is the only child of its parent*/
        b:only-child {
            background-color: lime;
        }
    </style>
</head>
<body>
    <div><b>only child</b></div>
    <div>
        <b>first child</b>
        <b>second child</b>
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

:only-of-type

93.5
Applies to any element that is the only sibling of its type.
Note: The :only-of-type pseudo is supported in Firefox from version 3.5.
<head>
    <style>
        /* represents the bold (b) tag which is the only b tag of its parent */
        b:only-of-type {
            background-color: lime;
        }
    </style>
</head>
<body>
    <div>
        <i>italic </i>
        <b>only bold </b>
        <i>italic</i>
    </div>
    <div>
        <b>first bold </b>
        <b>second bold</b>
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

:root

9
Applies to the top-level element of a document. In a HTML document, this is the HTML element.
<head>
    <style>
        :root {
            background-color: lime;
        }
    </style>
</head>
<body>
</body>
Did you find this example helpful? yes no

Supported by tags:

User Contributed Comments

Post Content

Post Content