Dynamic pseudo-classes classify elements on characteristics other than their name, attributes, or content, in principle characteristics that cannot be deduced from the document tree.
|:target pseudo-class selector||The |
|:checked||The :checked selector applies to toggable elements (e.g. radio buttons or checkboxes) that are toggled on.|
|:first-child||The :first-child pseudo-class matches an element that is the first child element of some other element.|
|:focus||The :focus pseudo-class applies while an element has the focus, i.e. accepts keyboard or mouse events, or other forms of input.|
|:lang©||The :lang© pseudo selector applies to documents that specifies the |
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (
:visited, for example), the status of its content (like
:checked on some form elements), or the position of the mouse (like
:hover which lets you know if the mouse is over an element or not).
/* unvisited links */ a:link /* visited links */ a:visited /* user hovers */ a:hover /* active links */ a:active
An example of combining dynamic pseudo-classes:
The last selector matches
a elements that are in the pseudo-class
:focus and in the pseudo-class
Note: An element can be both ‘
:visited’ and ‘
:active’ (or ‘
:link’ and ‘
Mozilla Developer Network : Article