CSS Selector Reference Manual

CSS Selectors

CSS selectors are used for "finding" (or selecting) the HTML elements you want to style.

Use our CSS selector tester to demonstrate different selectors.

CSS Simple Selectors

Simple selectors select elements based on element name, id, and class. Additionally, there are universal selectors (*)

Selector Example Example Description
element p Select all <p> elements.
#id #firstname Select the element with id="firstname".
* * Select all elements.
.class .intro Select each element with class="intro".

CSS Attribute Selectors

Attribute selectors select HTML elements that have a given set of attributes.

Selector Example Example Description
[attribute] [target] Select each element with the attribute target.
[attribute=value] [target=_blank] Select each element with the attribute target="_blank".
[attribute~=value] [title~=flower] Select each element whose title attribute contains the word "flower".
[attribute|=value] [lang|=en] Select each element whose lang attribute value starts with "en".
[attribute^=value] a[href^="https"] Select each <a> element whose src attribute value starts with "https".
[attribute$=value] a[href$=".pdf"] Select each <a> element whose src attribute ends with ".pdf".
[attribute*=value] a[href*="codew3c"] Select each <a> element whose href attribute value contains the substring "abc".

CSS nested selector

Selector Example Example Description
& & Apply styles to an element in the context of another element