This is a quick reference list of CSS selectors and how they work in selecting HTML elements to apply styling.
CSS – * Selector
The * selector selects all HTML elements in the document, and if used together with another element can be used to select all that element’s child elements.
CSS – :active Selector
The :active selector is used to select the active link, which becomes active when it’s clicked.
CSS – ::after Selector
The ::after pseudo-element inserts something after the content of a selected element.
CSS – [attribute] Selector
The [attribute] selector selects every HTML element with the specified attribute.
CSS – [attribute=value] Selector
The [attribute=value] selector selects every element with both the specified attribute and specified value.
CSS – [attribute~=value] Selector
The [attribute~=value] selector selects every element with a specific attribute that has a value containing a specified stand-alone word.
CSS – [attribute|=value] Selector
The [attribute|=value] selector selects every element with a specific attribute that has a value equal to or starting with a specified value.
CSS – [attribute^=value] Selector
The [attribute^=value] selector selects every element with a specific attribute that starts with a value beginning with a specified string.
CSS – [attribute$=value] Selector
The [attribute$=value] selector selects every element with a specific attribute that has a value ending in a specified string.
CSS – [attribute*=value] Selector
The [attribute*=value] selector selects every element with a specific attribute that has a value containing a specified string even as part of another word.
CSS – ::before Selector
The ::before pseudo-element inserts something before the content of a selected element.
CSS – :checked Selector
The :checked selector matches every checked input element for radio buttons, checkboxes, and option elements.
CSS – .class Selector
The .class selector selects all HTML elements with a specific class, which may include multiple elements on the page.
CSS – Element Selector
The element selector selects all HTML elements with a specific element tag name.
CSS – Element > Element Selector
The element > element selector is used to select elements with a specific parent.
CSS – :default Selector
The :default selector selects the default form element in a group of related elements.
CSS – :disabled Selector
The :disabled selector matches all disabled form elements.
CSS – :enabled Selector
The :enabled selector matches all enabled form elements.
CSS – Element + Element Selector
The Element + Next selector selects the very next element specified after (not within) the first specified element.
CSS – Element ~ Element Selector
The element ~ element selector selects sibling elements that appear after the specified element. Both of the specified elements must share the same parent.
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 – ::first-letter Selector
The ::first-letter selector is used to select the first letter of a specified, block-level element such as a paragraph or heading.
CSS – : empty Selector
The :empty selector selects empty HTML elements, which means an element without any child elements or text.
CSS – ::first-line Selector
The ::first-line selector is used to select the first line of text of a specified, block-level element such as a paragraph or heading.
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 – :fullscreen Selector
The :fullscreen selector is used to select any elements that are in full-screen mode.
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 – #id Selector
The #id selector selects an HTML element with a specific id. HTML only allows for one unique #id per document.
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 – :indeterminate Selector
The :indeterminate selector selects form elements that are in an indeterminate state.
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 – ::marker Selector
The ::marker selector selects the marker of a list item (the bullet or number).
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 – ::placeholder Selector
The ::placeholder selector selects form inputs with placeholder text.
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 – ::selection Selector
The ::selection selector matches the portion of an element that is selected by a user, and is most often used to set the background color of selected text.
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.
