CSS Selectors Cheat Sheet

In Cascading Style Sheets (CSS), a selector is a pattern that is used to select the elements to which a set of styles will be applied. Selectors can be used to select elements based on their tag name, class, id, attribute, and more. The syntax for a selector is typically a combination of these patterns, separated by combinators such as "." for class, "#" for id and " " for descendants. This cheat sheet for CSS selectors is a reference to all selectors.

CSS Selector

This cheat sheet is a quick reference guide for CSS selectors. It will help you select and style specific elements on your webpage easily. Whether you want to select elements by their tag, class, id or attributes, this cheat sheet has got you covered.

CSS selectors reference guide
SelectorExampleExample descriptionSelector type
**Selects all elements of any typeuniversal selector
.class.fooSelects all elements with class="foo"class selector
.class1.class2.name1.name2Selects all elements with class="name1 name2"class selector
.class1 .class2.name1 .name2Selects all elements with class="name2" that is a descendant of an element with class="name1"descendant selector ( ) (combinator)
#id#id-nameSelects the element with id="id-name"id selector
elementh1Selects all h1 elementstype selector
element.classh1.fooSelects all h1 elements with class="foo"compound selector
element#idh1#fooSelects all h1 elements with id="foo"compound selector
element, elementdiv, pSelects all div elements and all p elementsgrouping selector
element elementdiv pSelects all p elements inside div elementsdescendant selector ( ) (combinator)
element > elementdiv > pSelects all p elements where the parent is a div elementchild selector (>) (combinator)
element + elementdiv + pSelects the first p element that is placed immediately after div elementsadjacent sibling selector (+) (combinator)
element1 ~ element2p ~ ulSelects every ul element that is preceded by a p elementgeneral sibling selector (~) (combinator)
[attribute][target]Selects all elements with a target attributeattribute selector
[attribute=value][target=_blank]Selects all elements with target="_blank"attribute selector
[attribute~=value][title~=Foo]Selects all elements with a title attribute containing the word "Foo"attribute selector
[attribute|=value][lang|=en]Selects all elements with a lang attribute value equal to "en" or starting with "en-"attribute selector
[attribute^=value]a[href^="https"]Selects every a element whose href attribute value begins with "https"attribute selector
[attribute$=value]a[href$=".html"]Selects every a element whose href attribute value ends with ".html"attribute selector
[attribute*=value]a[href*="example"]Selects every a element whose href attribute value contains the substring "example"attribute selector
:activea:activeSelects the active linkpseudo-class selector
::afterp::afterInsert something after the content of each p elementpseudo-element selector
::beforep::beforeInsert something before the content of each p elementpseudo-element selector
:checkedinput:checkedSelects every checked input elementinput pseudo-class selector
:defaultinput:defaultSelects the default input elementinput pseudo-class selector
:disabledinput:disabledSelects every disabled input elementinput pseudo-class selector
:blankinput:blankSelects input elements which are empty, containing an empty string or other null input.input pseudo-class selector
:emptyp:emptySelects every p element that has no children (including text nodes)pseudo-class selector
:autofillinput:autofillMatches when an input has been autofilled by the browserinput pseudo-class selector
:enabledinput:enabledSelects every enabled input elementinput pseudo-class selector
:first-childp:first-childSelects every p element that is the first child of its parentpseudo-class selector
::first-letterp::first-letterSelects the first letter of every p elementpseudo-element selector
::first-linep::first-lineSelects the first line of every p elementpseudo-element selector
:first-of-typep:first-of-typeSelects every p element that is the first p element of its parentpseudo-class selector
:focusinput:focusSelects the input element which has focusinput pseudo-class selector
:fullscreen:fullscreenSelects the element that is in full-screen modepseudo-class selector
:hovera:hoverSelects links on mouse overpseudo-class selector
:in-rangeinput:in-rangeSelects input elements with a value within a specified rangeinput pseudo-class selector
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate stateinput pseudo-class selector
:invalidinput:invalidSelects all input elements with an invalid valueinput pseudo-class selector
:dir( [ ltr | rtl ] ):dir(rtl)Selects elements based on the directionality of the text contained in them, e.g. right-to-left (rtl).functional pseudo-class selector
:lang(language)p:lang(en)Selects every p element with a lang attribute equal to "en" (English)functional pseudo-class selector
:last-childp:last-childSelects every p element that is the last child of its parentpseudo-class selector
:last-of-typep:last-of-typeSelects every p element that is the last p element of its parentpseudo-class selector
:linka:linkSelects all unvisited linkspseudo-class selector
:modal:modalSelects an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.pseudo-class selector
:picture-in-picture:picture-in-pictureSelects the element which is currently in picture-in-picture mode.pseudo-class selector
::marker::markerSelects the markers of list itemspseudo-element selector
:not(selector):not(p)Selects every element that is not a p elementpseudo-class selector
:nth-child(n)p:nth-child(2)Selects every p element that is the second child of its parentpseudo-class selector
:nth-last-child(n)p:nth-last-child(2)Selects every p element that is the second child of its parent, counting from the last childpseudo-class selector
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every p element that is the second p element of its parent, counting from the last childpseudo-class selector
:nth-of-type(n)p:nth-of-type(2)Selects every p element that is the second p element of its parentpseudo-class selector
:only-of-typep:only-of-typeSelects every p element that is the only p element of its parentpseudo-class selector
:only-childp:only-childSelects every p element that is the only child of its parentpseudo-class selector
:optionalinput:optionalSelects input elements with no required attributepseudo-class selector
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified rangeinput pseudo-class selector
::placeholderinput::placeholderSelects input elements with the placeholder attribute specifiedpseudo-element selector
:placeholder-showninput:placeholder-shownSelects any input or textarea element that is currently displaying placeholder text.input pseudo-class selector
:read-onlyinput:read-onlySelects input elements with the readonly attribute specifiedinput pseudo-class selector
:read-writeinput:read-writeSelects input elements with the readonly attribute NOT specifiedinput pseudo-class selector
:requiredinput:requiredSelects input elements with the required attribute specifiedinput pseudo-class selector
:user-invalidinput:user-invalidSelects an input element with incorrect input, but only when the user has interacted with itinput pseudo-class selector
:root:rootSelects the document's root elementpseudo-class selector
::selection::selectionSelects the portion of an element that is selected by a userpseudo-element selector
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)pseudo-class selector
:validinput:validSelects all input elements with a valid valueinput pseudo-class selector
:visiteda:visitedSelects all user visited a elementspseudo-class selector
[1]

Background

Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of documents written in a markup language. CSS was first proposed by Håkon Wium Lie in 1994, and it was first implemented in 1996 in the browser Netscape Navigator 2.0. The initial version of CSS was relatively simple and focused on allowing developers to control the layout and presentation of HTML documents.

As the World Wide Web evolved, so did CSS. The introduction of CSS2 in 1998 brought new features such as media-specific style sheets, which allowed developers to apply styles based on the type of device the document was being viewed on. CSS2 also introduced support for more advanced selectors, such as attribute selectors and pseudo-class selectors.

CSS3, which was first published in 1999, added even more features to the language, including support for multi-column layout, flexible box layout, and improved text effects. It also introduced new selectors such as :nth-child and :nth-of-type selectors.

In recent years, CSS has become increasingly important for designing responsive and interactive web pages. CSS selectors, in particular, have become a powerful tool for developers, allowing them to select and style specific elements with a high degree of precision. With the development of CSS Grid Layout and Flexbox, the layout options have become more powerful and flexible, making it easier for developers to create advanced designs.

Today, CSS is widely used in web development, and it continues to evolve and improve. With new features such as CSS Grid Layout and Flexbox, CSS has become an essential tool for creating responsive and interactive web pages.

References

Sources

  1. https://w3c.github.io/csswg-drafts/selectors/
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  3. https://www.w3schools.com/cssref/css_selectors.php
  4. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
  5. https://web.dev/learn/css/selectors/