The type selector matches elements based on their type.

The .class selector selects all elements with the given class name.

The #id selector matches the element with the given id.

The universal selector * matches elements of any type.

The :root pseudo-class matches the root element of a document, for HTML documents this is always the html element.

The selector is often used to define global CSS custom properties.

The selector list , is a list of CSS selectors separated by commas. It selects all the elements that match any of the selectors in the list.

The descendant combinator matches an element that is a descendant of another specified element.

The child combinator > matches elements if they are direct children of the element on the left side of the combinator.

The adjacent sibling combinator + matches if the second element immediately follows the first element.

The general sibling combinator ~ matches the elements that are siblings of a given element. It is similar to the adjacent sibling combinator, but it doesn't require the elements to be immediately after each other.

The :not(selector list) pseudo-class matches elements that do not match any of the selectors in the selector list.

The :has(selector list) pseudo-class function matches an element if any of the selectors passed as parameter match at least one element.

The selector is currently not supported in Firefox.

The :is(selector list) pseudo-class function accepts a list of selectors as argument. It matches all elements that match any of the selectors passed as arguments.

The selector is currently not supported in Firefox.

The :where(selector list) pseudo-class function accepts a list of selectors as argument. It matches all elements that match any of the selectors passed as arguments.

The selector is currently not supported in Firefox.

The [attribute] selector matches elements that have the specified attribute, regardless of its value.

The [attribute=value] selector matches all elements that have the specified attribute with a value exactly equal to a certain value.

The [attr^=value] selector matches all elements with the specified attribute whose value starts with a certain value.

The [attr$=value] selector matches all elements with the specified attribute whose value ends with with a certain value.

The [attribute*=value] selector matches all elements that have the specified attribute and the attribute value contains the specified substring.

The [attr~=value] selector matches all elements with the specified attribute whose value contains a list of space-separated values and one of the values is exactly value.

Note: This is a contrived example. Use the .class selector to select elements by class instead.

The [attr|=value] selector matches all elements with the specified attribute whose value contains a list of hyphen-separated values and the first value is exactly value.

Note: This is a contrived example. In practice, you should use the language selector.

The :hover pseudo-class matches elements that are currently being hovered over by the mouse cursor. This also matches parent elements of the hovered element.

The :active pseudo-class matches elements that are currently activated by the user.

The :visited pseudo-class matches hyperlinks that you visited before. For privacy reasons, the selector has many limitations. You can only style a limited set of properties, like color. Reading the color value of the element via JavaScript will return the value of an unvisited link. Querying visited links via JavaScript is not possible. In some browsers the styles may even be limited to hyperlinks of the same domain.

The :focus pseudo-class matches the element that is currently focused. Interactive elements like buttons and links can be focused by default. For non-interactive elements, you can add the tabindex attribute to make them focusable.

The :focus-visible pseudo-class matches the element that is currently focused, if the focus state is visible. Whether the focus state is visible depends on the input method used to focus the element and the element itself.

The :focus-within pseudo-class matches elements that are either focused themselves or have a descendant that is focused.

The :checked pseudo-class matches checkboxes, radio buttons and select options that are currently checked / selected.

The :indeterminate pseudo-class matches checkboxes, radio buttons and progress bars in indeterminate state.

The :enabled pseudo-class matches elements that are not disabled, like inputs or buttons.

The :disabled pseudo-class matches elements that are disabled, like inputs or buttons.

The :read-only pseudo-class matches elements that are read-only, i.e. not editable.

The :default pseudo-class matches checkboxes, radio buttons, and select options that are checked/selected by default.

The :defined pseudo-class matches any element that is defined. This matches standard element built in to the browser and custom elements that have been defined using customElements.define(). Custom elements that have not (yet) been defined will not match this pseudo-class.

The :target pseudo-class uses the URL's fragment (the part of the URL after the # symbol) and finds the element with this id.

The :placeholder-shown pseudo-class matches elements with a placeholder text that is currently visible.

The :autofill pseudo-class matches an input if it has been autofilled by the browser.

The :in-range pseudo-class matches elements whose value is within a range specified by the min and max attributes.

The :out-of-range pseudo-class matches elements whose value is out of a range specified by the min and max attributes.

The :valid pseudo-class matches elements that are in a valid state.

The :invalid pseudo-class matches elements that are in an invalid state.

The :user-valid pseudo-class is similar to :valid, but it only matches elements in a valid state after the user has interacted with them.

The :user-inalid pseudo-class is similar to :invalid, but it only matches elements in an invalid state after the user has interacted with them.

The :required pseudo-class matches input elements that are required.

The :optional pseudo-class matches input elements that are optional.

The :empty pseudo-class matches elements that have no content.

The :lang() pseudo-class matches elements based on the language of their content.

The :first-child pseudo-class matches an element that is the first child element of its parent.

The :last-child pseudo-class matches an element that is the last child element of its parent.

The :only-child pseudo-class matches an element if it's the only child of its parent. It's the short form of :first-child:last-child.

The :first-of-type pseudo-class matches the first element of its type among siblings.

The :last-of-type pseudo-class matches the last element of its type among siblings. If no type is provided, it will match the last element of any type.

The :only-of-type pseudo-class matches an element if it's the only element of its type among its siblings.

The :nth-child() pseudo-class matches elements based on their position among a group of siblings, starting with 1 as the first element.

The :nth-child() pseudo-class supports a counter variable n which starts at 0 and increments by 1 for every element.

The first result is 3n = 3 * 0 = 0 which doesn't match any element (because the first element is 1). The second result is 3n = 3 * 1 = 3 which matches the third element in the list.

The :nth-child(odd) selector matches all odd elements.

The :nth-child(even) selector matches all even elements.

The :nth-child() pseudo-class supports a counter variable n which starts at 0 and increments by 1 for every element. It allows you to define an offset before matching the first element.

The :nth-child() pseudo-class supports a counter variable n which starts at 0 and increments by 1 for every element. It allows you limit the number of elements being matched.

The :nth-child() pseudo-class supports an of <selector> syntax. It finds the elements matching the specified selector and then matches the elements based in their position in that filtered set of elements.