Position based pseudo-classes: We can style the HTML elements based on their position on the webpage.
| pseudo-class | Description |
|---|---|
| :root | Selects the document’s root element. |
| A:firstchild | Selects every A element that is the first child of its parent. |
| A:last-child | Selects every A element that is the last child of its parent. |
| A B:nth-child(n) | Selects every B element that is the nth child of its parent A. |
| A:nth-of-type(n) | Select every A element that is nth A element of its parent. |
| A:first-of-type | Selects every A element that is first A element of its parent. |
| A:last-of-type | Selects every A element that is last A element of its parent. |
| A:nth-last-of-type(n) | Selects every A element that is the nth child of its parent counting from last. |
| A B:nth-last-child(n) | Selects every B element that is the nth child of its parent A, counting from the last child. |
| A:only-of-type | Selects every element A that is the only child of its type, of its parent. |
Note: odd and even keywords can be used with nth-child() selector where odd and even matches the element's index.
Let us see the usage of position based pseudo-classes in the below example.
