CSS Selectors (2024)

Earn income with your CSS skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.

CSS Properties

CSS Length

CSS selectors are patterns that select elements that need to be styled.

Selectors find elements based on their id, class, type, attribute, and more.

Example

#

This paragraph is styled with a class selector named para.

A styled paragraph

Selector Types

There are 6 CSS selector types.

CSS class selectors
CSS id selectors
CSS element selectors
CSS attribute selectors
CSS pseudo-class selectors
CSS global selectors

CSS Class Selectors

#

Class selectors select the class attribute of an element. The selector is prefixed with a . (dot). One or more elements can be selected.

Some example class selectors:

Selector	Example	Selects
`.class`	.classname	All elements with class="classname"
`.class1.class2`	<div class="cn1 cn2"> ... </div>	All elements with both cn1 and cn2 classnames.
`.class1 .class2`	<div class="cn1"> <div class="cn2"> ... </div> </div>	All elements with cn2 that are contained by an element with cn1.

CSS Id Selectors

#

Id selectors select the id attribute of an element. The selector is prefixed with a # (hash). Only one element can be selected because id values are unique on a page.

An id selector:

Selector	Example	Selects
`#id`	#email	The element with id="email"

Element Selectors

#

Element selectors select elements by tag name, i.e. type, such as div or ul. The style applies to all elements of that type.

Some element selectors:

Selector	Example	Selects
`element`	ul	All <ul> elements
`element1, element2`	div, ul	All <div> and <ul> elements.
`element1 element2`	div ul	All <ul> elements inside <div> elements.
`element1 > element2`	div > ul	All child <ul> elements of <div> elements.
`element1 + element2`	div + ul	All <ul> elements immediately preceded by a <div> element.
`element1 ~ element2`	div ~ ul	All <ul> elements preceded by a <div> element.

Attribute Selectors

#

Attribute selectors select elements by attribute. The selectors are surrounded by square brackets, for example [hidden]. The style applies to all elements with that attribute.

Some attribute selectors:

Selector	Example	Selects
`[attribute]`	[for]	All elements with a for attribute
`[attribute=value]`	[for="email"]	All elements with a for="email" attribute
`[attribute^=value]`	button[value^="Go"]	All <button> elements whose value attribute starts with "Go"
`[attribute$=value]`	img[src$=".png"]	All <img> elements whose src attribute ends with ".jpg"
`[attribute*=value]`	img[alt*="Van Gogh"]	All <a> elements whose alt attribute contains the substring "Van Gogh"
`[attribute~=value]`	[title~=create]	All elements whose title attribute contains the word "create", delimited by spaces.
`[attribute\|=value]`	[lang\|=nl]	All elements whose lang attribute is a hyphen-separated list starting with "nl" or "nl-"

Pseudo-class Selectors

#

Pseudo-class selectors select elements by psuedo-class. It is commonly combined with element selectors, such as input:enabled.

Some pseudo class selectors:

Selector	Example	Selects
`:active`	a:active	All active links
`:visited`	a:visited	All visited links
`:link`	a:link	All unvisited links
`::after`	ul::after	Add cosmetic content after each <ul> element
`::before`	ul::before	Add cosmetic content before each <ul> element
`:checked`	input:checked	All <input> elements that are checked
`:default`	input:default	All <input> elements that are specified as default
`:enabled`	input:enabled	All <input> elements that are enabled
`:disabled`	input:disabled	All <input> elements that are disabled
`:valid`	input:valid	All <input> input elements with a valid value
`:invalid`	input:invalid	All <input> elements with an invalid value
`:in-range`	input:in-range	All <input> elements with a value that is within a specified range
`:out-of-range`	input:out-of-range	All <input> elements with a value outside the specified range
`:indeterminate`	input:indeterminate	All <input> elements that are in an indeterminate state
`:required`	input:required	All <input> elements with a "required" attribute
`:optional`	input:optional	All <input> elements with no "required" attribute
`:read-only`	input:read-only	All <input> elements with a "readonly" attribute
`:read-write`	input:read-write	All <input> elements WITHOUT a "readonly" attribute
`::placeholder`	input::placeholder	All <input> elements with placeholder text
`:hover`	input:hover	The <input> element that currently being hovered
`:focus`	input:focus	The <input> element that currently has focus
`:empty`	ol:empty	All <ol> element without child elements
`:first-child`	li:first-child	All <li> elements that are the first child of their parent
`:last-child`	li:last-child	All <li> elements that are the last child of their parent
`:nth-child(n)`	li:nth-child(2)	All <li> elements that are second child of their parent
`:nth-last-child(n)`	li:nth-last-child(2)	All <li> elements that are second to last child of their parent
`:only-child`	li:only-child	All <li> elements that are the only child of its parent
`:first-of-type`	label:first-of-type	All <label> elements that are the first label of their parent
`:last-of-type`	label:last-of-type	All <label> elements that are the last label of their parent
`:nth-of-type(n)`	label:nth-of-type(2)	All <label> elements that are the second label of their parent
`:nth-last-of-type(n)`	label:nth-last-of-type(2)	All <label> elements that are the second to last label of their parent
`:only-of-type`	label:only-of-type	All <label> elements that are the only label element of their parent
`::first-letter`	p::first-letter	The first letter of every <p> element
`::first-line`	p::first-line	The first line of every <p> element
`:lang(language)`	p:lang(fr)	All French <p> elements
`:not(selector)`	:not(table)	All elements that are not a <table> element
`:root`	:root	The document's root element
`::selection`	::selection	Parts of an element that is selected (highlighted) by the user -- usually text
`:target`	:target	The element that matches the url fragment, e.g. element with id="list" when the url is www.mysite.com#list.

Global Selectors

#

The global selector uses an * (asterisk). It selects all elements.

Selector	Example	Selects
`*`	*	All elements