CSS Introduction | CSS Selectors | Structural Pseudo-classes

With structural pseudo-classes, you can select elements in specific positions within the hierarchy of HTML elements.

The structural pseudo-classes available in CSS are as follows.

Pseudo-class	Description
`:first-child`	Selects the first child element among all child elements.
`:last-child`	Selects the last child element among all child elements.
`:nth-child`	Selects child elements located in the nth position from the beginning among all child elements.
`:nth-last-child`	Selects child elements located in the nth position from the end among all child elements.
`:first-of-type`	Selects the first element of a specific type among all child elements.
`:last-of-type`	Selects the last element of a specific type among all child elements.
`:nth-of-type`	Selects elements of a specific type that appear in the nth position among all child elements.
`:nth-last-of-type`	Selects elements of a specific type that appear in the nth position from the end among all child elements.
`:only-child`	Selects child elements of elements that have only one child element.
`:only-of-type`	Selects child elements of elements that have only one child element of a specific type.
`:empty`	Selects all elements that have no child elements.
`:root`	Selects the root element of the document.

`:first-child`

:first-child selects the first child element among all child elements.

<style>
    p:first-child { color: red; font-weight: bold; }
</style>

:last-child selects the last child element among all child elements.

<style>
    p:last-child { color: red; font-weight: bold; }
</style>

:nth-child selects child elements located in the nth position from the beginning among all child elements.

<style>
    p:nth-child(2n) { color: red; font-weight: bold; }
</style>

:nth-last-child selects child elements located in the nth position from the end among all child elements.

<style>
    p:nth-last-child(3n) { color: red; font-weight: bold; }
</style>

:first-of-type selects the first element of a specific type among all child elements.

<style>
    p:first-of-type { color: red; font-weight: bold; }
</style>

:last-of-type selects the last element of a specific type among all child elements.

<style>
    p:last-of-type { color: red; font-weight: bold; }
</style>

:nth-of-type selects elements of a specific type that appear in the nth position among all child elements.

<style>
    p:nth-of-type(2n) { color: red; font-weight: bold; }
</style>

:nth-last-of-type selects elements of a specific type that appear in the nth position from the end among all child elements.

<style>
    p:nth-last-of-type(2n+1) { color: red; font-weight: bold; }
</style>

:only-child selects all child elements of elements that have only one child element.

<style>
    p:only-child { color: red; font-weight: bold; }
</style>

:only-of-type selects all child elements of elements that have only one child element of a specific type.

<style>
    p:only-of-type { color: red; font-weight: bold; }
</style>

:empty selects all elements that have no child elements.

<style>
    p:empty { width: 300px; height: 20px; background: red; }
</style>

:root selects the root element of the document.

<style>
    :root { background: red; }
</style>

In an HTML document, the root element is always the html element.