CSS Selectors

The simple selectors select elements based on element-name, id, and class. In addition, there is the universal selector (*).

Selector	Example	Example description
element	p	Selects all <p> elements
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
.class	.intro	Selects all elements with class="intro"

The attribute selector selects HTML elements with a given attribute set.

Selector	Example	Example description
[attribute]	[lang]	Selects all elements with a lang attribute
[attribute=value]	[lang="it"]	Selects all elements with lang="it"
[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]	[href^="https"]	Selects all elements with a href attribute value that begins with "https"
[attribute$=value]	[href$=".pdf"]	Selects all elements with a href attribute value ends with ".pdf"
[attribute*=value]	[href*="w3schools"]	Selects all elements with a href attribute value containing the substring "w3schools"

Selector	Example	Example description
&	&	Applies styles for an element within the context of another element