Skip to main content

CSS Selectors Cheat Sheet

CSS selectors are powerful tools in web development that allow developers to select and manipulate HTML elements. Each different type of CSS selector gives developers a different way to target and manipulate elements on a webpage.

Simple Selectors

Simple selectors are the most basic form of CSS selectors. They include type selectors, class selectors, and id selectors.

CSS SelectorMeaning
*Selects all elements
elementSelects all element
.classSelects all elements with class="class"
#idSelects the element with id="id"
[attribute]Selects all elements with attribute

Combinator Selectors

Combinator selectors are used to select elements that have a specific relationship to another element.

CSS SelectorMeaning
element elementSelects all elements inside element
element > elementSelects all elements directly inside element
element + elementSelects the element directly after element
element ~ elementSelects all elements after element

Pseudo-class Selectors

Pseudo-class selectors are used to select elements based on their state.

CSS SelectorMeaning
:activeSelects the active link
:hoverSelects links on mouse hover
:visitedSelects all visited links
:first-childSelects the first child of an element
:last-childSelects the last child of an element

Attribute Selectors

Attribute selectors are used to select elements with a certain attribute or attribute value.

CSS SelectorMeaning
[attribute=value]Selects elements with attribute="value"
[attribute~=value]Selects elements with attribute containing value
[attribute|=value]Selects elements with attribute starting with value
[attribute^=value]Selects elements with attribute beginning with value
[attribute$=value]Selects elements with attribute ending with value
[attribute*=value]Selects elements with attribute containing value

This CSS selectors cheat sheet is a quick guide to CSS selectors for programmers. Whether you're a beginner or an experienced developer, this cheat sheet will make your web development journey easier and more efficient. It's important to note that there are more CSS selectors not covered here. This cheat sheet only covers the most commonly used CSS selectors in web development.


Understanding the hierarchy of CSS selectors is critical to mastering CSS. This hierarchy, also known as specificity, determines which styles are applied when there is a conflict between different CSS rules that can apply to the same element.

CSS Specificity

Specificity determines which CSS rule is applied by the browsers. Each selector has its place in the hierarchy. If two selectors apply to the same element, the one with higher specificity wins.

CSS SelectorSpecificityMeaning
<code>!important</code>HighestOverrides other declarations
Inline stylesHighStyles added to the style attribute of an element
<code>#id</code>Medium-highSelects the element with id="id"
<code>.class</code>, <code>:pseudo-class</code>, <code>[attribute]</code>MediumSelects based on class, pseudo-class, or attribute
<code>element</code>, <code>::pseudo-element</code>LowSelects based on element type or pseudo-element
<code>*</code>LowestSelects all elements

Selector Chaining and Nesting

Chaining and nesting selectors can increase specificity. Chaining combines multiple conditions for a single element, while nesting applies styles based on a hierarchical relationship.

CSS SelectorSpecificityMeaning
<code>#id.class</code>Medium-highSelects the element with id="id" and class="class"
<code>element.class</code>MediumSelects <code>element</code> with class="class"
<code>element element</code>LowSelects <code>element</code> inside another <code>element</code>

Remember that when selectors have the same specificity, the last declared rule in the CSS will take precedence. This is known as the source order rule.