Tree Structure Pseudo-Classes
Use tree structure pseudo-classes to style elements based on their hierarchy.
We'll cover the following...
Tree structure pseudo-classes help us select elements based on their relationship to other elements in the DOM tree. They offer precise control over styling based on the document hierarchy.
:nth-of-type(n)
The :nth-of-type(n) pseudo-class selects the nth sibling of its type (element name) within the parent.
Here we select the second <p> element within its parent, changing its text color.
:nth-last-of-type(n)
The :nth-last-of-type(n) pseudo-class selects the nth sibling of its type from the end.
This code bolds the last <p> element within its parent. ...