pseudo-classes
Summary
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.
Page | Summary |
---|---|
:target pseudo-class selector | The :target pseudo-class (note the “:”) represents an element in the current document, if any, that has id attribute set to a name that is matching the fragment identifier of the current URI. |
:-ms-input-placeholder | |
:checked | The :checked selector applies to toggable elements (e.g. radio buttons or checkboxes) that are toggled on. |
:disabled | |
:empty | |
:enabled | |
:first-child | The :first-child pseudo-class matches an element that is the first child element of some other element. |
:first-of-type | |
:focus | The :focus pseudo-class applies while an element has the focus, i.e. accepts keyboard or mouse events, or other forms of input. |
:in-range | The :in-range pseudo selector selects input elements when their value is within a specified range. |
:indeterminate | |
:invalid | |
:lang© | The :lang© pseudo selector applies to documents that specifies the lang attribute to an HTML element. This allows to style based on which language (and/or dialect) a given section is written into. |
:last-of-type | |
:nth-child(n) | |
:nth-last-child(n) | |
:nth-last-of-type(n) | |
:nth-of-type(n) | |
:only-child | |
:only-of-type | |
:optional | |
:required | |
:root | |
:valid |
Usage
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).
Examples
/* unvisited links */
a:link
/* visited links */
a:visited
/* user hovers */
a:hover
/* active links */
a:active
An example of combining dynamic pseudo-classes:
a:focus
a:focus:hover
The last selector matches a
elements that are in the pseudo-class :focus
and in the pseudo-class :hover
.
Note: An element can be both ‘
:visited
’ and ‘:active
’ (or ‘:link
’ and ‘:active
’).
Attributions
Mozilla Developer Network : Article