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.
| Selector | Example | Example description | Selector type |
|---|---|---|---|
* | * | Selects all elements of any type | universal selector |
.class | .foo | Selects all elements with class="foo" | class selector |
.class1.class2 | .name1.name2 | Selects all elements with class="name1 name2" | class selector |
.class1 .class2 | .name1 .name2 | Selects all elements with class="name2" that is a descendant of an element with class="name1" | descendant selector ( ) (combinator) |
#id | #id-name | Selects the element with id="id-name" | id selector |
element | h1 | Selects all h1 elements | type selector |
element.class | h1.foo | Selects all h1 elements with class="foo" | compound selector |
element#id | h1#foo | Selects all h1 elements with id="foo" | compound selector |
element, element | div, p | Selects all div elements and all p elements | grouping selector |
element element | div p | Selects all p elements inside div elements | descendant selector ( ) (combinator) |
element > element | div > p | Selects all p elements where the parent is a div element | child selector (>) (combinator) |
element + element | div + p | Selects the first p element that is placed immediately after div elements | adjacent sibling selector (+) (combinator) |
element1 ~ element2 | p ~ ul | Selects every ul element that is preceded by a p element | general sibling selector (~) (combinator) |
[attribute] | [target] | Selects all elements with a target attribute | attribute 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 |
:active | a:active | Selects the active link | pseudo-class selector |
::after | p::after | Insert something after the content of each p element | pseudo-element selector |
::before | p::before | Insert something before the content of each p element | pseudo-element selector |
:checked | input:checked | Selects every checked input element | input pseudo-class selector |
:default | input:default | Selects the default input element | input pseudo-class selector |
:disabled | input:disabled | Selects every disabled input element | input pseudo-class selector |
:blank | input:blank | Selects input elements which are empty, containing an empty string or other null input. | input pseudo-class selector |
:empty | p:empty | Selects every p element that has no children (including text nodes) | pseudo-class selector |
:autofill | input:autofill | Matches when an input has been autofilled by the browser | input pseudo-class selector |
:enabled | input:enabled | Selects every enabled input element | input pseudo-class selector |
:first-child | p:first-child | Selects every p element that is the first child of its parent | pseudo-class selector |
::first-letter | p::first-letter | Selects the first letter of every p element | pseudo-element selector |
::first-line | p::first-line | Selects the first line of every p element | pseudo-element selector |
:first-of-type | p:first-of-type | Selects every p element that is the first p element of its parent | pseudo-class selector |
:focus | input:focus | Selects the input element which has focus | input pseudo-class selector |
:fullscreen | :fullscreen | Selects the element that is in full-screen mode | pseudo-class selector |
:hover | a:hover | Selects links on mouse over | pseudo-class selector |
:in-range | input:in-range | Selects input elements with a value within a specified range | input pseudo-class selector |
:indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state | input pseudo-class selector |
:invalid | input:invalid | Selects all input elements with an invalid value | input 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-child | p:last-child | Selects every p element that is the last child of its parent | pseudo-class selector |
:last-of-type | p:last-of-type | Selects every p element that is the last p element of its parent | pseudo-class selector |
:link | a:link | Selects all unvisited links | pseudo-class selector |
:modal | :modal | Selects 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-picture | Selects the element which is currently in picture-in-picture mode. | pseudo-class selector |
::marker | ::marker | Selects the markers of list items | pseudo-element selector |
:not(selector) | :not(p) | Selects every element that is not a p element | pseudo-class selector |
:nth-child(n) | p:nth-child(2) | Selects every p element that is the second child of its parent | pseudo-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 child | pseudo-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 child | pseudo-class selector |
:nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p element of its parent | pseudo-class selector |
:only-of-type | p:only-of-type | Selects every p element that is the only p element of its parent | pseudo-class selector |
:only-child | p:only-child | Selects every p element that is the only child of its parent | pseudo-class selector |
:optional | input:optional | Selects input elements with no required attribute | pseudo-class selector |
:out-of-range | input:out-of-range | Selects input elements with a value outside a specified range | input pseudo-class selector |
::placeholder | input::placeholder | Selects input elements with the placeholder attribute specified | pseudo-element selector |
:placeholder-shown | input:placeholder-shown | Selects any input or textarea element that is currently displaying placeholder text. | input pseudo-class selector |
:read-only | input:read-only | Selects input elements with the readonly attribute specified | input pseudo-class selector |
:read-write | input:read-write | Selects input elements with the readonly attribute NOT specified | input pseudo-class selector |
:required | input:required | Selects input elements with the required attribute specified | input pseudo-class selector |
:user-invalid | input:user-invalid | Selects an input element with incorrect input, but only when the user has interacted with it | input pseudo-class selector |
:root | :root | Selects the document's root element | pseudo-class selector |
::selection | ::selection | Selects the portion of an element that is selected by a user | pseudo-element selector |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | pseudo-class selector |
:valid | input:valid | Selects all input elements with a valid value | input pseudo-class selector |
:visited | a:visited | Selects all user visited a elements | pseudo-class selector |
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.