CSS Structural Pseudo-Classes

Structural pseudo-classes allows the selection of elements on the basis of structure of the entire HTML document, which includes the position of each element and number of times the occurrence of an element in the document.

A browser treats an HTML document as a tree of nodes, where nodes are represented by elements and their child elements.

Structural pseudo-classes allows you to select these nodes and calculate the position of a child node in the node list of a parent node or element.

CSS Structural Pseudo-Classes Lists

Here are the list of structural pseudo-classes available in CSS:

• :root - Selects all Unstyled elements
• :nth-child(N) - Selects N^th child element, regardless of type and parent
• :nth-last-child(N) - Selects N^th child element, from last, regardless of type and parent
• :nth-of-type(N) - Same as nth-child(N), but cares about the type
• :nth-last-of-type(N) - Same as nth-last-child(N), but cares about the type
• :first-child - Selects every first child element of its parent
• :last-child - Selects every last child element of its parent
• :first-of-type - Same as :first-child, but cares about the type
• :last-of-type - Same as :last-child, but cares about the type
• :only-child - Selects elements that are only child of its parent
• :only-of-type - Same as only-child, but cares about the type
• :empty - Selects elements with no child element, including the text node

CSS Online Test