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 #
| Selector | Example | Description | Specificity |
|---|---|---|---|
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 | ||
element | p | Simple selector. Selects all p elements. | 0-0-1 |
ID selector ( # ) #Selects elements based on the value of their | 1-0-0 | ||
#id | #foo | Simple selector. Selects the element with id="foo". | 1-0-0 |
element#id | p#foo | Compound selector. Selects all p elements with id="foo". | 1-0-1 |
Class selectors ( .class ) #Selects elements based on the value of their | 0-1-0 | ||
.class | .foo | Simple selector. Selects all elements with class="foo". | 0-1-0 |
element.class | p.foo | Compound 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.bar | Compound 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 | *::after | Compound selector. Insert something after the content of all elements. | 0-0-1 |
::backdrop | dialog::backdrop | Compound selector. Styling a box the size of the viewport. | 0-0-2 |
::before | p::before | Compound selector. Insert something before the content of each p element. | 0-0-2 |
::cue | video::cue | Compound selector. Style captions and other cues in media with WebVTT. | 0-0-2 |
::file-selector-button | input::file-selector-button | Compound selector. Selects the button of an input element of type="file". | 0-0-2 |
::first-letter | p::first-letter | Compound selector. Selects the first letter of every p element. Needs to be a block container. | 0-0-2 |
::first-line | p::first-line | Compound 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 |
::marker | li::marker | Compound selector. Selects the marker box of list items. | 0-0-2 |
::placeholder | input::placeholder | Compound selector. Selects input elements with the placeholder attribute specified. | 0-0-2 |
::selection | p::selection | Compound 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 | ||
:active | a:active | Compound selector. Selects the active link. | 0-1-1 |
:any-link | a:any-link | Compound selector. Selects every a or area element that has an href attribute regardless if it has been visited. | 0-1-1 |
:autofill | iput::autofill | Compound 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 |
:blank | input:blank | Selects input elements which are empty, containing an empty string or other null input. | 0-1-1 |
:buffering | video::buffering | Compound selector. Selects playable elements like audio or video while buffering a media resource. | 0-1-1 |
:checked | input:checked | Compound 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 |
:default | input:default | Compound selector. Selects the default input element. | 0-1-1 |
:defined | custom:defined | Compound 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 |
:disabled | input:disabled | Compound selector. Selects every disabled input element. | 0-1-1 |
:empty | p:empty | Compound selector. Selects every p element that has no children (including text nodes). | 0-1-1 |
:enabled | input:enabled | Compound selector. Selects every enabled input element. | 0-1-1 |
:first | @page :first | Simple selector. Selects the first page of a printed document. Allows to changr margins, orphans, widows, and page breaks. | 0-1-0 |
:first-child | p:first-child | Compound selector. Selects every p element that is the first child of its parent. | 0-1-1 |
:first-of-type | p:first-of-type | Compound selector. Selects every p element that is the first p element of its parent. | 0-1-1 |
:focus | a:focus | Compound selector. Selects the a element which has focus. | 0-1-1 |
:focus-visible | input:focus-visible | Compound 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-within | label:focus-within | Compound selector. Selects the label element if the corresponding input element has :focus. | 0-1-1 |
:fullscreen | :fullscreen | Simple 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 |
:hover | a:hover | Compound selector. Selects a elements on mouse over. | 0-1-1 |
:in-range | input:in-range | Compound selector. Selects input elements with a value within a specified range. | 0-1-1 |
:indeterminate | input:indeterminate | Compound selector. Selects input elements that are in an indeterminate state. | 0-1-1 |
:invalid | input:invalid | Compound 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-child | p:last-child | Compound selector. Selects every p element that is the last child of its parent. | 0-1-1 |
:last-of-type | p:last-of-type | Compound selector. Selects every p element that is the last p element of its parent. | 0-1-1 |
:left | @page :left | Simple selector. Selects all left-hand pages of a printed document. | 0-1-0 |
:link | a:link | Compound selector. Selects all unvisited links. | 0-1-1 |
:local-link | a:local-link | Compound selector. Selects a link to the same document, e.g. href="#target" | 0-1-1 |
:modal | :modal | Simple 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 |
:muted | audio:muted | Compound 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) | Compound 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-child | p:only-child | Compound selector. Selects every p element that is the only child of its parent. | 0-1-1 |
:only-of-type | p:only-of-type | Compound selector. Selects every p element that is the only p element of its parent. | 0-1-1 |
:optional | input:optional | Compound selector. Selects input elements with no required attribute. | 0-1-1 |
:out-of-range | input:out-of-range | Compound 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 | :paused | Simple selector. Selects a playable element, e.g. audio or video which is paused. | 0-1-0 |
:picture-in-picture | :picture-in-picture | Simple selector. Selects the element which is currently in picture-in-picture mode. | 0-1-0 |
:placeholder-shown | input:placeholder-shown | Compound selector. Selects any input element that is currently displaying placeholder text. | 0-1-1 |
:playing | :playing | Simple selector. Selects a playable element, e.g. audio or video which is playing. | 0-1-0 |
:popover-open | :popover-open | Simple selector. Selects any element with a popover attribute that is in the showing state. | 0-1-0 |
:read-only | input:read-only | Compound selector. Selects input elements with the readonly attribute specified. | 0-1-1 |
:read-write | input:read-write | Compound selector. Selects input elements with the readonly attribute NOT specified. | 0-1-1 |
:required | input:required | Compound selector. Selects input elements with the required attribute specified. | 0-1-1 |
:right | @page :right | Simple selector. Selects all right-hand pages of a printed document. | 0-1-0 |
:root | :root | Simple selector. Selects the document's root element, e.g. html. | 0-1-0 |
:scope | :scope | Simple selector. Selects elements that are a reference point, or scope, for selectors to match against. | 0-1-0 |
:seeking | :seeking | Simple 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 |
:stalled | audio:stalled | Compound 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:target | Compound selector. Selects the current active element with id="news". | 1-1-0 |
:user-invalid | input:user-invalid | Compound selector. Selects an input element with incorrect input, but only when the user has interacted with it. | 0-1-1 |
:user-valid | input:user-valid | Compound selector. Selects an input element with correct input, but only when the user has interacted with it. | 0-1-1 |
:valid | input:valid | Compound selector. Selects all input elements with a valid value, even if the user has not interacted with the element. | 0-1-1 |
:visited | a:visited | Compound selector. Selects all user visited a elements. | 0-1-1 |
:volume-locked | video:volume-locked | Compound 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 .bar | Compound selector. Selects all class="bar" elements inside class="foo" elements. | 0-2-0 |
.class element | .foo p | Compound selector. Selects all p elements inside class="foo" elements. | 0-1-1 |
element element | div p | Compound selector. Selects all p elements inside div elements | 0-0-2 |
Child combinator ( > ) #Selects all direct children of a specified element. | 0-0-0 | ||
.class > .class | .foo > .bar | Selects all class="bar" elements where the immediate parent is a class="foo" element. | 0-2-0 |
.class > element | .foo > p | Selects all p elements where the immediate parent is a class="foo" element. | 0-1-1 |
element > element | div > p | Selects 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 + .bar | Selects 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 + p | Selects 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 + element | div + p | Selects 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 ~ .bar | Selects every class"bar" element that is preceded by a class="foo" element | 0-1-1 |
.class ~ element | .foo ~ p | Selects every p element that is preceded by a class="foo" element | 0-1-1 |
element ~ element | p ~ ul | Selects every ul element that is preceded by a p element | 0-0-2 |
Namespace separator separator ( | ) #Selects elements in any or no namespace. | 0-0-0 | ||
| | *|p | Selects all p elements in any namespace (including no namespace). | 0-0-1 |
| | |p | Selects all p elements in not in any namespace. | 0-0-1 |
| | NameSpace|p | Selects all p elements in NameSpace. | 0-0-1 |
Selector list ( , ) #A comma-separated list of selectors. Selects all the matching nodes. | n/a | ||
element, .class | h1, .foo | Selects all h1 and class="foo" elements. | n/a |
element, .class #id | h1, .foo, #bar | Selects all h1, class="foo", and id="bar" elements. | n/a |
element, element | h1, p | Selects 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 #
The 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 (read from left to right) — ID - CLASS - TYPE — gets applied. The score is determined by counting the number of selector components in each category.
Selector weight categories #
- ID column:
Includes only ID selectors, e.g.#example. Each ID in a matching selector adds1-0-0to the weight value. - CLASS column:
Includes class selectors, e.g..foo, attribute selectors, e.g.[type="radio"], and pseudo-classes, e.g.:hover. Each class, attribute selector, or pseudo-class in a matching selector adds0-1-0to the weight value. - TYPE column:
Includes type selectors, e.g.p, and pseudo-elements, e.g.::before, and all other selectors with double-colon notation. Each type or pseudo-element in a matching selector adds0-0-1to the weight value. - No value:
- The universal selector
*, the pseudo-class:where(), and its parameters have a value of0-0-0. They match elements but do not impact the specificity weight value. - Combinators (
+,>,~," ",||) do not add any value to the specificity weight. - The
&nesting combinator does not increase specificity weight, but nested rules do. Nesting, in terms of specificity and functionality, is similar to the:is()pseudo-class. - The
:is(),:has(), and negation:not()pseudo-classes themselves do not add weight. The specificity weight is determined by the selector parameter in the list of selectors with the highest specificity.
- The universal selector
For more detailed explanations and examples, learn how to calculate specificity in CSS. To convert selectors into specificity score, you can also simply use our Specificity calculator.
Further readings #
Sources and recommended, further resources on the topic:
- W3C: Selectors Level 4
- W3C: CSS selectors (latest)
- MDN: CSS selectors
- MDN: CSS pseudo classes
- MDN: CSS specificity
- How to calculate specificity in CSS
- CSS specificity calculator
Author
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
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/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.
