Skip to main content

CSS selectors cheat sheet

Summary

CSS selectors cheat sheet and reference guide. Selectors and combinators are patterns that are used to select the elements to which a set of styles will be applied. This cheat sheet is a reference to all CSS selectors and combinators, including their specificity score.

CSS selectors list #

CSS selectors reference guide
SelectorExampleDescriptionSpecificity

Universal selector ( * ) #

Selects elements of any type.

0-0-0
**Simple selector. Selects all elements of any type.0-0-0

Type selector ( element ) #

Selects elements by node name.

0-0-1
elementpSimple selector. Selects all p elements.0-0-1

ID selector ( # ) #

Selects elements based on the value of their id attribute.

1-0-0
#id#fooSimple selector. Selects the element with id="foo".1-0-0
element#idp#fooCompound selector. Selects all p elements with id="foo".1-0-1

Class selectors ( .class ) #

Selects elements based on the value of their class attribute.

0-1-0
.class.fooSimple selector. Selects all elements with class="foo".0-1-0
element.classp.fooCompound selector. Selects all p elements whose class value is a whitespace-separated list of words, one of which is exactly foo, e.g. <p class="foo bar">.0-1-1
.class.class.foo.barCompound selector. Selects all elements whose class value is a whitespace-separated list of words that includes both foo and bar, e.g. class="foo bar baz".0-2-0

Attribute selectors ( [attribute] ) #

Selects all siblings that share the same parent as the specified element.

0-1-0
[attribute][download]Simple selector. Selects all elements with a download attribute.0-1-0
[attribute=value][target="_blank"]Simple selector. Selects all elements with target="_blank" attribute.0-1-0
[attribute~=value][title~=Foo]Simple selector. Selects all elements with a title attribute whose value is a whitespace-separated list of words, one of which is exactly Foo.0-1-0
[attribute~=value i][title~=Foo i]Simple selector. Selects all elements with a title attribute whose value is a whitespace-separated list of words, one of which is Foo or foo. Adding an i (or I) causes the value to be compared case-insensitively.0-1-0
[attribute|=value][lang|=en]Simple selector. Selects all elements with a lang attribute value equal to en or starting with it immediately followed by a hyphen, e.g. en-.0-1-0
[attribute^=value][href^="https"]Simple selector. Selects every element whose href attribute value begins with https.0-1-0
[attribute$=value][href$=".html"]Simple selector. Selects every element whose href attribute value ends with .html.0-1-0
element[attribute*=value]a[href*="example"]Compound selector. Selects every a element whose href attribute value contains the substring example.0-1-1

Pseudo elements ( :: ) #

Selects a specific state of the selected element(s), defined by a keyword.

0-0-1
::after*::afterCompound selector. Insert something after the content of all elements.0-0-1
::backdropdialog::backdropCompound selector. Styling a box the size of the viewport.0-0-2
::beforep::beforeCompound selector. Insert something before the content of each p element.0-0-2
::cuevideo::cueCompound selector. Style captions and other cues in media with WebVTT.0-0-2
::file-selector-buttoninput::file-selector-buttonCompound selector. Selects the button of an input element of type="file".0-0-2
::first-letterp::first-letterCompound selector. Selects the first letter of every p element. Needs to be a block container.0-0-2
::first-linep::first-lineCompound selector. Selects the first line of every p element. Needs to be a block container.0-0-2
::highlight()::highlight()Simple selector. Applies styles to a custom highlight registered using the HighlightRegistry.0-0-1
::markerli::markerCompound selector. Selects the marker box of list items.0-0-2
::placeholderinput::placeholderCompound selector. Selects input elements with the placeholder attribute specified.0-0-2
::selectionp::selectionCompound selector. Selects the portion of p elements that is selected by a user.0-0-2
::slotted()::slotted(*)Compound selector. Selects any element placed inside a slot.0-0-1

Pseudo classes ( : ) #

Selects specific states or behaviors of elements.

0-1-0
:activea:activeCompound selector. Selects the active link.0-1-1
:any-linka:any-linkCompound selector. Selects every a or area element that has an href attribute regardless if it has been visited.0-1-1
:autofilliput::autofillCompound selector. Selects the input element if its value has been autofilled by the browser. If the user makes edits to the field, the class will cease to match.0-1-1
:blankinput:blankSelects input elements which are empty, containing an empty string or other null input.0-1-1
:bufferingvideo::bufferingCompound selector. Selects playable elements like audio or video while buffering a media resource.0-1-1
:checkedinput:checkedCompound selector. Selects every checked input element.0-1-1
:current(element):checked(p)Simple selector. Selects the p element if it is currently being displayed (time-dimensional).0-1-0
:defaultinput:defaultCompound selector. Selects the default input element.0-1-1
:definedcustom:definedCompound selector. Selects all standard elements and custom elements defined by JavaScript, e.g. custom.0-1-1
:dir([ltr|rtl]):dir(ltr)Simple selector. Selects any element with left-to-right ltr text.0-1-0
:disabledinput:disabledCompound selector. Selects every disabled input element.0-1-1
:emptyp:emptyCompound selector. Selects every p element that has no children (including text nodes).0-1-1
:enabledinput:enabledCompound selector. Selects every enabled input element.0-1-1
:first@page :firstSimple selector. Selects the first page of a printed document. Allows to changr margins, orphans, widows, and page breaks.0-1-0
:first-childp:first-childCompound selector. Selects every p element that is the first child of its parent.0-1-1
:first-of-typep:first-of-typeCompound selector. Selects every p element that is the first p element of its parent.0-1-1
:focusa:focusCompound selector. Selects the a element which has focus.0-1-1
:focus-visibleinput:focus-visibleCompound selector. Selects the input element which machtes the :focus pseudo-class and the UA determines that the focus should be made evident.0-1-1
:focus-withinlabel:focus-withinCompound selector. Selects the label element if the corresponding input element has :focus.0-1-1
:fullscreen:fullscreenSimple selector. Selects the element that is in full-screen mode.0-1-0
:future:future(p)Simple selector. Selects the p element if it appears entirely after an element that matches :current.0-1-0
:has()h1:has(+ p)Compound selector. Selects the h1 element if a p element immediately follows.0-0-2
:host():host(p)Compound selector. Selects the shadow host of the shadow DOM containing the CSS used inside.0-1-1
:hovera:hoverCompound selector. Selects a elements on mouse over.0-1-1
:in-rangeinput:in-rangeCompound selector. Selects input elements with a value within a specified range.0-1-1
:indeterminateinput:indeterminateCompound selector. Selects input elements that are in an indeterminate state.0-1-1
:invalidinput:invalidCompound selector. Selects all input elements with an invalid value.0-1-1
:is():is(ol, ul)Simple selector. Selects any element that can be selected from the list.0-1-0
:lang(lc)p:lang(en)Compound selector. Selects every p element with a lang attribute equal to en (English).0-1-1
:last-childp:last-childCompound selector. Selects every p element that is the last child of its parent.0-1-1
:last-of-typep:last-of-typeCompound selector. Selects every p element that is the last p element of its parent.0-1-1
:left@page :leftSimple selector. Selects all left-hand pages of a printed document.0-1-0
:linka:linkCompound selector. Selects all unvisited links.0-1-1
:local-linka:local-linkCompound selector. Selects a link to the same document, e.g. href="#target"0-1-1
:modal:modalSimple selector. Selects an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.0-1-0
:mutedaudio:mutedCompound selector. Selects a muted element capable of making sound, e.g. audio or video.0-1-0
:not():not(p)Simple selector. Selects every element that is not a p element.0-0-1
:nth-child(n)p:nth-child(2)Compound selector. Selects every p element that is the second child of its parent.0-1-1
:nth-last-child(n)p:nth-last-child(2)SCompound selector. elects every p element that is the second child of its parent, counting from the last child.0-1-1
:nth-last-of-type(n)p:nth-last-of-type(2)Compound selector. Selects every p element that is the second p element of its parent, counting from the last child.0-1-1
:nth-of-type(n)p:nth-of-type(2)Compound selector. Selects every p element that is the second p element of its parent.0-1-1
:only-childp:only-childCompound selector. Selects every p element that is the only child of its parent.0-1-1
:only-of-typep:only-of-typeCompound selector. Selects every p element that is the only p element of its parent.0-1-1
:optionalinput:optionalCompound selector. Selects input elements with no required attribute.0-1-1
:out-of-rangeinput:out-of-rangeCompound selector. Selects input elements with a value outside a range specified by min and max attributes.0-1-1
:past():past(p)Simple selector. Selects any element which appears entirely before an element that matches :current (time-dimensional).0-1-0
:paused:pausedSimple selector. Selects a playable element, e.g. audio or video which is paused.0-1-0
:picture-in-picture:picture-in-pictureSimple selector. Selects the element which is currently in picture-in-picture mode.0-1-0
:placeholder-showninput:placeholder-shownCompound selector. Selects any input element that is currently displaying placeholder text.0-1-1
:playing:playingSimple selector. Selects a playable element, e.g. audio or video which is playing.0-1-0
:popover-open:popover-openSimple selector. Selects any element with a popover attribute that is in the showing state.0-1-0
:read-onlyinput:read-onlyCompound selector. Selects input elements with the readonly attribute specified.0-1-1
:read-writeinput:read-writeCompound selector. Selects input elements with the readonly attribute NOT specified.0-1-1
:requiredinput:requiredCompound selector. Selects input elements with the required attribute specified.0-1-1
:right@page :rightSimple selector. Selects all right-hand pages of a printed document.0-1-0
:root:rootSimple selector. Selects the document's root element, e.g. html.0-1-0
:scope:scopeSimple selector. Selects elements that are a reference point, or scope, for selectors to match against.0-1-0
:seeking:seekingSimple selector. Selects a playable element, e.g. audio or video which is seeking (playback of a specific position has been requested, but the media element has not yet reached that position) a playback postion.0-1-0
:stalledaudio:stalledCompound selector. Selects a playable element, e.g. audio or video which is stalled (playback of a specific position has been requested, but the media element has failed to receive any data) a playback postion.0-1-1
:target#news:targetCompound selector. Selects the current active element with id="news".1-1-0
:user-invalidinput:user-invalidCompound selector. Selects an input element with incorrect input, but only when the user has interacted with it.0-1-1
:user-validinput:user-validCompound selector. Selects an input element with correct input, but only when the user has interacted with it.0-1-1
:validinput:validCompound selector. Selects all input elements with a valid value, even if the user has not interacted with the element.0-1-1
:visiteda:visitedCompound selector. Selects all user visited a elements.0-1-1
:volume-lockedvideo:volume-lockedCompound selector. Selects an element capable of making sound, e.g. audio or video where the audio volume is currently locked by the user.0-1-1
:where():where(ul, ol)Compound selector. Selects any element selected by one of the selectors in the list.0-0-0

Descendant combinator ( space ) #

Selects all elements that are descendants of a specified element, regardless of the level. Selectors which utilize a descendant combinator are called descendant selectors.

0-0-0
.class .class.foo .barCompound selector. Selects all class="bar" elements inside class="foo" elements.0-2-0
.class element.foo pCompound selector. Selects all p elements inside class="foo" elements.0-1-1
element elementdiv pCompound selector. Selects all p elements inside div elements0-0-2

Child combinator ( > ) #

Selects all direct children of a specified element.

0-0-0
.class > .class.foo > .barSelects all class="bar" elements where the immediate parent is a class="foo" element.0-2-0
.class > element.foo > pSelects all class="bar" elements where the immediate parent is a p element.0-1-1
element > elementdiv > pSelects all p elements where the immediate parent is a div element.0-0-2

Adjacent sibling combinator ( + ) #

Selects an element that is immediately preceded by a specified element.

0-0-0
.class + .class.foo + .barSelects the first class="bar" element that is placed immediately after class="foo" elements, and both are children of the same parent element.0-2-0
.class + element.foo + pSelects the first p element that is placed immediately after class="foo" elements, and both are children of the same parent element.0-1-1
element + elementdiv + pSelects the first p element that is placed immediately after div elements, and both are children of the same parent element.0-0-2

Subsequent sibling combinator ( ~ ) #

Selects all siblings that share the same parent as the specified element.

0-0-0
.class ~ .class.foo ~ .barSelects every class"bar" element that is preceded by a class="foo" element0-1-1
.class ~ element.foo ~ pSelects every p element that is preceded by a class="foo" element0-1-1
element ~ elementp ~ ulSelects every ul element that is preceded by a p element0-0-2

Namespace separator separator ( | ) #

Selects elements in any or no namespace.

0-0-0
|*|pSelects all p elements in any namespace (including no namespace).0-0-1
||pSelects all p elements in not in any namespace.0-0-1
|NameSpace|pSelects all p elements in NameSpace.0-0-1

Selector list ( , ) #

A comma-separated list of selectors. Selects all the matching nodes.

n/a
element, .classh1, .fooSelects all h1 and class="foo" elements.n/a
element, .class #idh1, .foo, #barSelects all h1, class="foo", and id="bar" elements.n/a
element, elementh1, pSelects all h1 and p elements.n/a

Selector types #

CSS selectors can be classified into three main types based on their complexity:

Simple selectors #

These are the most basic type of selectors that target elements based on their type, class, ID, or attributes.

Compound selectors #

Compound selectors combine multiple simple selectors, targeting elements that satisfy all the specified conditions.

Complex selectors #

Complex selectors are combinations of compound selectors and combinators. They define more specific relationships between elements.

Specificity #

Specificity is how browsers decide which CSS style to apply to an element. It’s like a scoring system for CSS rules, helping the browser figure out which one is more important. This way, it knows which styles should be used for a particular element, especially if conflicting styles exist.

Score #

This score is based on the types of selectors used in the CSS rules. If there are multiple rules with different styles for the same element, the one with the highest score — ID - CLASS - TYPE — gets applied. The score is determined by counting the number of selector components in each category.

Selector weight categories #


Further readings #

Sources and recommended, further resources on the topic:

Author

Jonas Jared Jacek • J15k

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

License

License: CSS selectors cheat sheet by Jonas Jared Jacek is licensed under CC BY-NC-SA 4.0.

This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. If others modify or adapt the material, they must license the modified material under identical terms. To give credit, provide a link back to the original source, the author, and the license e.g. like this:

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/publications/css-selectors-cheat-sheet">CSS selectors cheat sheet</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-NC-SA 4.0</a>.</p>

For more information see the DITig legal page.


“Good design comes from a deep understanding of the technologies behind the scenes.”

Jeffrey Veen, American designer and design strategistThe Art & Science of Web Design, - IT quotes