In order to access this site you need to enable JavaScript!

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

Structural Pseudo-Classes

Pseudos:

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

9	3.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

9	3.5

Applies to any element that is the last child of its type in its parent.

:nth-child ()

9	3.5

Applies to any element that is the n-th child of its parent.

:nth-last-child ()

9	3.5

Applies to any element that is the n-th child of its parent, counting from the last one.

:nth-of-type ()

9	3.5

Applies to any element that is the n-th sibling of its type.

:nth-last-of-type ()

9	3.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

9	3.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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, applet, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, embed, fieldSet, font, form, H1, H2, H3, H4, H5, H6, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, object, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp

: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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

:first-of-type

9	3.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>

Copy Code

Preview

Syntax Highlighter

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

:last-of-type

9	3.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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

:nth-child (selector)

9	3.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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

:nth-last-child (selector)

9	3.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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

:nth-of-type (selector)

9	3.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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

:nth-last-of-type (selector)

9	3.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>

Copy Code

Preview

Syntax Highlighter

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

:only-of-type

9	3.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>

Copy Code

Preview

Syntax Highlighter

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

Structural Pseudo-Classes

Pseudos:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Supported by tags:

Post Content