CSS pseudo-classes allow for more specific selection of elements within a document based upon an element's status, location in the DOM tree structure, user action, or other factors.
The pseudo-class (literally, "false-class") of CSS allows for more specific selection of elements within a document based upon an element's status, location in the DOM tree structure, user action, or other factors. Styling can then be applied to just those elements meeting the pseudo-class qualifications, similar to how one uses a CSS class to target an element. They are not to be confused with pseudo elements.
List of CSS Pseudo-Classes
This is a list of all pseudo-classes that are currently included in CSS specifications (not any editor's drafts or upcoming specifications).
:linkand:visited
Selects links which are either unvisited or visited, respectively, in order to apply additional styles to them. Visited links are often shown in an alternate color to signify to the end-user that they've already visited that page previously.:active
Selects an element which is currently active, or in the process of being activated. This occurs after a user presses down on a link, button, or other activating element, and before the user releases the click.:hover
Selects an element which is currently being hovered over by the user so that additional styles may be applied to it. Many elements which perform some action when clicked have a "hover effect" to signify to the end-user that it does something. It can also be used to reveal additional information to the user and many other purposes.:focus
Selects an element which currently has focus. For example: the user's cursor is currently positioned inside the input element (while they may be typing, etc).:enabledand:disabled
Selects a user interface element which is either enabled or disabled so that additional styles may be applied to them.:checked
Selects a radio button or checkbox which is currently in the "checked" state so that additional styles may be applied to it. Keep in mind that many browsers do not allow you to apply styles directly to the radio button or checkbox. This is mostly used to select additional elements immediately after the boxes when in the checked state.:empty
Selects an element which has no children or text inside it (and is hence, empty). Keep in mind that this cannot apply to replaced elements which do not have actual content (such as images and inputs).:root
Selects the root of the document.:target
Selects an element which is the target of the referring URI. This occurs when an element has an ID matching the comment part of the URL (#some-place-in-the-document).:nth-child(),:nth-of-type(),:nth-last-child(),:nth-last-of-type(),:first-child,:last-child,:first-of-type,:last-of-type,:only-child, and:only-of-type
These are all structural pseudo-classes which select elements based on their positioning within their parent element. They are useful for creating zebra-striped rows, styling specific elements which always appear first or last, and many other uses.:lang()
Selects an element which is using the language specified.
Replaced Elements
Any element whose appearance and/or dimensions are determined by some external resource is considered to be a replaced element. Some pseudo-classes cannot be applied to replaced elements because they have no "content" or get replaced with something (such as user interface controls). Replaced elements include images (<img>), inline frames (<iframe>), line breaks (<br>), horizontal rules (<hr>), plugins (<object>), form elements (<button>, <textarea>, <input>, and <select>), videos (<video>), audio sounds (<audio>), and canvases (<canvas>). Any other element is considered to be a non-replaced element.
