2.8 KiB
2.8 KiB
title |
---|
Pseudo |
Pseudo Selectors
Pseudo selectors provide a way to target elements using pseudo classes or pseudo elements.
Structural Pseudo Classes
Structural Pseudo classes offer a way to target elements based on their position.
Class | Description |
---|---|
:root |
Root of the document. In the context of HTML documents, this would be html tag at the top. It could mean different elements in other documents such as XML or SVG. |
:only-child |
An element that is the only child of its parent element. |
:first-child |
First child of a parent. |
:last-child |
Last child of a parent element. |
:nth-child(n) |
n-th child of its parent. |
:nth-last-child(n) |
n-th child from the last child. The reverse of :nth-child . |
:only-of-type |
The only element of the type within its siblings with other types. |
:first-of-type |
The first element of the type among its siblings. |
:last-of-type |
The last element of the type among its siblings. |
:nth-of-type(n) |
n-th sibling of the same type. |
:nth-last-of-type(n) |
n-th sibling of the same type from the last one. The reverse of :nth-of-type . |
:empty |
An element without any child elements. |
UI State Pseudo Classes
UI state pseudo classes offer a way to target elements based on their current state.
Class | Description |
---|---|
:link |
Unvisited link elements. |
:visited |
A link visited already. |
:hover |
An element over which mouse pointer is hovering. |
:active |
An element on which mouse pointer has been clicked, but not yet released. |
:focus |
An element that has focus. Important for accessibility, for example, while using tab key for navigation. |
:enabled |
An element that is in enabled state. |
:disabled |
An element that has been disabled. |
:checked |
A selected Checkbox or Radio button. |
Pseudo elements
Pseudo elements on the other hand, are dynamically generated elements or elements at a special place.
Selector | Description |
---|---|
::first-line |
First line of an element, usually a container or paragraph. |
::first-letter |
A letter of an element. Widely used for styling drop-caps. |
::before |
A dynamic element created with content of its own before the actual element. |
::after |
A dynamic element created with content of its own after the actual element. |
More Information:
Additional information can be found on below references.