CSS Selector Reference
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
Use our CSS Selector Tester to demonstrate the different selectors.
Selector | Example | Example description |
---|---|---|
#id | #firstname | Selects the element with id="firstname" |
* | * | Selects all elements |
element | p | Selects all <p> elements |
CSS Class Selectors
The class selector selects HTML elements based on the value of their class attribute.
Selector | Example | Example description |
---|---|---|
.class | .intro | Selects all elements with class="intro" |
element.class | p.intro | Selects all <p> elements with class="intro" |
.class1.class2 | .name1.name2 | Selects all elements with both name1 and name2 set within its class attribute |
.class1 .class2 | .name1 .name2 | Selects all elements with name2 that is a descendant of an element with name1 |
CSS Attribute Selectors
The attribute selector selects HTML elements with a given attribute set.
Selector | Example | Example description |
---|---|---|
[attribute] | [target] | Selects all elements with a target attribute |
[attribute=value] | [target="_blank"] | Selects all elements with target="_blank" |
[attribute~=value] | [title~="flower"] | Selects all elements with a title attribute containing the word "flower" |
[attribute|=value] | [lang|="en"] | Selects all elements with a lang attribute value equal to "en" or starting with "en-" |
[attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
[attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
[attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |