- Tags: Pseudo-Class
- Categories: CSS Reference, CSS Resources, Reference
Quick Reference
This is a quick reference list of CSS pseudo-classes used to select HTML elements for styling.
CSS – :active Selector
The :active selector is used to select the active link, which becomes active when it’s clicked.
CSS – :checked Selector
The :checked selector matches every checked input element for radio buttons, checkboxes, and option elements.
CSS – :disabled Selector
The :disabled selector matches all disabled form elements.
CSS – :enabled Selector
The :enabled selector matches all enabled form elements.
CSS – :first-child Selector
The :first-child selector selects all HTML elements of a specified type that are also the first child of their parent element.
CSS – : empty Selector
The :empty selector selects empty HTML elements, which means an element without any child elements or text.
CSS – :first-of-type Selector
The :first-of-type selector selects all elements that are the first child of a specified type of their parent element.
CSS – :focus Selector
The :focus selector selects the element that currently has focus.
CSS – :hover Selector
The :hover selector selects elements when you mouse over them, and is commonly used for links and images with links, but can be used on any element.
CSS – :in-range Selector
The :in-range selector selects elements with a value that is within a specified range, and only works for input elements with min/max attributes.
CSS – :invalid Selector
The :invalid selector selects form elements with a value that does not validate according to the element’s settings.
CSS – :lang Selector
The :lang selector is used to select elements with a lang attribute with a specified value (e.g., lang = “en” or lang = “en-us”).
CSS – :last-child Selector
The :last-child selector selects all HTML elements of a specified type that are also the last child of their parent element.
CSS – :last-of-type Selector
The :last-of-type selector selects all elements that are the last child of a specified type of their parent element.
CSS – :link Selector
The :link selector is used to select unvisited links, and will not style links you have already visited.
CSS – :not() Selector
The :not() selector selects all elements except the specified element.
CSS – :nth-child() Selector
The :nth-child() selector selects all specified elements that are the nth child of their parent, regardless of all the children’s types.
CSS – :nth-last-child() Selector
The :nth-last-child() selector selects all specified elements that are the nth child of their parent counting from the last child.
CSS – :nth-last-of-type() Selector
The :nth-last-of-type() selector selects all elements that are the nth child of a specified type, of their parent, counting from the last child.
CSS – :nth-of-type() Selector
The :nth-of-type() selector selects all elements that are the nth child of a specified type, of their parent.
CSS – :only-child Selector
The :only-child selector selects every element that is the only child of its parent. If the parent has multiple child elements, it will NOT be selected.
CSS – :only-of-type Selector
The :only-of-type selector selects every element that is the only child of its type, of its parent.
CSS – :optional Selector
The :optional selector selects form elements which are optional (those without the required attribute).
CSS – :out-of-range Selector
The :out-of-range selector selects elements with a value that is NOT within a specified range, and only works for input elements with min/max attributes.
CSS – :read-only Selector
The :read-only selector selects form inputs which are “readonly” (those with a “readonly” attribute).
CSS – :read-write Selector
The :read-write selector selects form inputs which are “readable” and “writeable” (those with no “readonly” or “disabled” attributes).
CSS – :required Selector
The :required selector selects form inputs which are required (those with the required attribute).
CSS – :root Selector
The :root selector matches the document’s root element, which is always the HTML element.
CSS – :target Selector
The :target selector selects the current active target anchor element on the page (the element being linked to).
CSS – :valid Selector
The :valid selector selects form inputs with a value that properly validates according to the element’s settings.
CSS – :visited Selector
The :visited selector is used to select already visited links.
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
