CSS Selector CheatSheet: Master the Art of Targeting Elements

CSS selectors are the foundation of styling web pages. Whether you're a beginner or need a quick reference, this guide covers all the essential selectors with real-world examples.

Basic Selectors

Element Selector

Targets all elements of a specific type.

p {
  color: blue;
}

Selects all <p> elements.

Class Selector

Targets elements with a specific class.

.button {
  background-color: green;
}

Selects all elements with class="button".

ID Selector

Targets a single element with a specific ID.

#header {
  font-size: 24px;
}

Selects the element with id="header".

Universal Selector

Targets every element on the page.

* {
  margin: 0;
  padding: 0;
}

Combinators

Descendant Selector (Space)

Targets elements inside another element, at any nesting level.

div p {
  line-height: 1.6;
}

<div>
  <p>Selected ✓</p>
  <section>
    <p>Selected ✓</p>
    <article>
      <p>Selected ✓</p>
    </article>
  </section>
</div>

Selects all <p> elements inside <div> elements, no matter how deeply nested.

Child Selector (>)

Targets direct children only.

ul > li {
  list-style: square;
}

<ul>
  <li>Selected ✓</li>
  <li>Selected ✓</li>
  <div>
    <li>NOT selected ✗</li>
  </div>
</ul>

Selects only <li> elements that are direct children of <ul>, not grandchildren.

Adjacent Sibling Selector (+)

Targets the element immediately following another.

h2 + p {
  font-weight: bold;
}

<article>
  <h2>Title</h2>
  <p>Selected ✓</p>
  <p>NOT selected ✗</p>
  <p>NOT selected ✗</p>
</article>

Selects only the first <p> that comes right after an <h2>.

General Sibling Selector (~)

Targets all siblings following an element.

h2 ~ p {
  color: gray;
}

<article>
  <h2>Title</h2>
  <p>Selected ✓</p>
  <p>Selected ✓</p>
  <div>Something else</div>
  <p>Selected ✓</p>
</article>

<p>NOT selected ✗ (not a sibling)</p>

Selects all <p> elements that follow an <h2> at the same level (siblings).

Grouping Selectors

Multiple Selectors (Comma)

Apply the same styles to multiple selectors.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Selects all <h1>, <h2>, and <h3> elements.

Attribute Selectors

Basic Attribute

Targets elements with a specific attribute.

[disabled] {
  opacity: 0.5;
}

Selects all elements with a disabled attribute.

Attribute with Value

Targets elements with a specific attribute value.

[type="text"] {
  border: 1px solid #ccc;
}

Selects elements where type="text".

Attribute Contains

Targets elements where the attribute contains a specific value.

[class*="btn"] {
  padding: 10px 20px;
}

Selects elements with classes like "btn", "btn-primary", "submit-btn".

Attribute Starts With

[href^="https"] {
  color: green;
}

Selects links that start with "https".

Attribute Ends With

[src$=".pdf"] {
  background-image: url('pdf-icon.png');
}

Selects elements with src ending in ".pdf".

Pseudo-classes

:nth-child()

Targets elements based on their position among siblings.

<ul>
  <li>Item 1</li>
  <li>Item 2 - Selected ✓</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

li:nth-child(2) {
  color: red;
}

Selects the 2nd child element.

<table>
  <tr>Row 1 - Selected ✓</tr>
  <tr>Row 2</tr>
  <tr>Row 3 - Selected ✓</tr>
  <tr>Row 4</tr>
</table>

tr:nth-child(odd) {
  background-color: #f0f0f0;
}

Selects odd-numbered children (1st, 3rd, 5th, etc.).

div:nth-child(3n) {
  border-left: 3px solid blue;
}

Selects every 3rd element (3, 6, 9, etc.).

:nth-of-type()

Similar to nth-child, but only counts elements of the same type.

<article>
  <h2>Heading</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2 - Selected ✓</p>
  <div>A div</div>
  <p>Paragraph 3</p>
</article>

p:nth-of-type(2) {
  font-style: italic;
}

Selects the 2nd <p> element, ignoring other element types like <h2> and <div>.

:first-child and :last-child

<ul>
  <li>First - Selected by :first-child ✓</li>
  <li>Second</li>
  <li>Third</li>
  <li>Last - Selected by :last-child ✓</li>
</ul>

li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

:not()

Excludes elements matching the selector.

button:not(.disabled) {
  cursor: pointer;
}

Selects all buttons except those with class "disabled".

:hover, :focus, :active

Interactive states.

a:hover {
  text-decoration: underline;
}

input:focus {
  border-color: blue;
}

button:active {
  transform: scale(0.98);
}

Pseudo-elements

::before and ::after

Insert content before or after an element.

.quote::before {
  content: '"';
  font-size: 2em;
}

.external-link::after {
  content: ' ↗';
}

::first-letter and ::first-line

p::first-letter {
  font-size: 2em;
  float: left;
}

p::first-line {
  font-weight: bold;
}

Combining Selectors

You can chain selectors for more specific targeting.

/* Class and element */
p.intro {
  font-size: 1.2em;
}

/* Multiple classes */
.button.primary {
  background-color: blue;
}

/* Complex combination */
nav > ul li:not(:last-child) a:hover {
  color: orange;
}

Specificity Quick Reference

From lowest to highest specificity:

Element selectors (p, div)
Class selectors (.class), attribute selectors ([type="text"])
ID selectors (#id)
Inline styles (style="...")
!important (use sparingly!)

Pro Tips

Keep it simple: More specific doesn't always mean better. Overly specific selectors are harder to override.
Use classes: They're reusable and have good specificity balance.
Avoid over-nesting: div > div > div > p is a maintenance nightmare.
Leverage :nth-child() formulas: (2n) for even, (2n+1) for odd, (3n+2) for custom patterns.