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 selector selects every HTML element with the specified attribute.
• CSS – [attribute=value] Selector
  The selector selects every element with both the specified attribute and specified value.
• CSS – [attribute~=value] Selector
  The selector selects every element with a specific attribute that has a value containing a specified stand-alone word.
• CSS – [attribute|=value] Selector
  The 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 selector selects every element with a specific attribute that starts with a value beginning with a specified string.
• CSS – [attribute$=value] Selector
  The selector selects every element with a specific attribute that has a value ending in a specified string.
• CSS – [attribute*=value] Selector
  The 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 – :default Selector
  The :default selector selects the default form element in a group of related elements, and can only be used on button, input type=”checkbox”, input type=”radio”, and option elements.
• CSS – :disabled Selector
  The :disabled selector matches all disabled form elements.
• 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. The element > element selector can be used along with the #id, .class, and any other selector.
• CSS – Element + Element Selector
  The Element + Next selector selects the very next element specified after (not within) the first specified element. The element + element selector can be used along with the #id, .class, and any other selector.
• 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 – : empty Selector
  The :empty selector selects empty HTML elements, which means an element without any child elements or text.
• 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 – ::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 – ::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, and can only be used on input type=”checkbox”, input type=”radio”, and progress elements.
• 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 in an unordered list or number in an ordered list).
• 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.