Visit us on YouTube Here.
SHARE

List of All CSS Selectors With Examples - CSS Selector Cheat Sheet and Reference

Full List of All CSS Selectors in details with examples and demo. The Best CSS Selectors Cheat Sheet and Reference.

I also have a CSS full course on YouTube. In that course you will learn everything about CSS And also all these CSS Selectors with examples and demo. Watch The Full Course Here: Learn CSS Online for Free - Complete Course for Beginners.

Selector Name Example Details and Demo
.class .hidden Selects all elements with class="hidden"
.class1.class2 .active.btn Selects all elements with class="active btn"
.class1 .class2 .test-container .test-child Selects all elements with class="test-child" that are child elements of class="test-container"
#id #user-id Selects the element with id="user-id"
* * Selects all elements(global or all child of specified element)
element section Selects all <section> elements
element.class section.first Selects all <section> elements with class="first"
element, element section, h3 Selects all <section> elements and all <h3> elements
CSS Combinator Selectors
element element section h3 Selects all <h3> elements that are inside <section> elements
element>element section > h3 Selects all <h3> elements where the parent is a <section> element
element + element section + div Selects the first <div> element that is placed immediately after <section> elements
element1 ~ element2 div ~ p Selects every <p> element that is preceded by a <div> element
CSS Attribute Selectors
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [type="text"] Selects all elements with type="text"
[attribute~=value] [temp-val~="aqyanoos"] Selects all elements with a temp-val attribute containing the word "aqyanoos"
[attribute|=value] [class|="container"] Selects all elements with a class attribute value equal to "container" or starting with "container-"
[attribute^=value] img[src^="nature"] Selects every <img> element whose src attribute value begins with "nature"
[attribute$=value] img[src$=".png"] Selects every <img> element whose src attribute value ends with ".png"
[attribute*=value] a[href*="aqyanoos"] Selects every <a> element whose href attribute value contains the string "aqyanoos"
CSS Pseudo-Class Selectors
:active a:active Selects the active link
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:hover .link:hover Selects all elements with class="link" on mouse over
:checked input:checked Selects all checked <input> elements
:default input:default Selects all default <input> elements
:disabled input:disabled Selects all disabled <input> elements
:empty div:empty Selects all <div> element that has no children
:enabled input:enabled Selects all enabled <input> elements
:first-child div:first-child Selects all <div> elements that are the first child
:first-of-type .hdr:first-of-type Selects all elements with class="hdr" that are the first element inside its parent
:focus input:focus Selects the input element which has focus
:fullscreen :fullscreen Selects all elements that are in full-screen mode
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) div:lang(en) Selects every <div> element with a lang attribute equal to "en"
:last-child div:last-child Selects all <div> elements that are the last child of its/their parent(s)
:last-of-type p:last-of-type Selects all <p> elements that are the last <p> element of their parents
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(3) Selects all <p> elements that are the third child of their parent
:nth-last-child(n) div:nth-last-child(2) Selects every <div> element that is the third child from the end
:nth-last-of-type(n) div:nth-last-of-type(4) Selects every <div> element that is the fourth <div> element from the end
:nth-of-type(n) p:nth-of-type(3) Selects every <p> element that is the third <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write textarea:read-write Selects textarea elements with the "readonly" attribute NOT specified
:required textarea:required Selects textarea elements with the "required" attribute specified
:root :root Selects the document's root element
:target #user-12:target Selects the current active #user-12 element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
CSS Pseudo-Element Selectors
::after i::after Insert something after the content of each <i> element
::before .icon::before Insert something before the content of each element with the class="icon"
::first-letter .speech::first-letter Selects the first letter of every element with class="speech"
::first-line div::first-line Selects the first line of every <div> element
::marker ::marker Selects the markers of list items
::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified
::selection ::selection Selects the portion of an element that is selected by a user