I occasionally forget all the various css selectors that are avaliable. Made this little reference to help :)

wildcard selector

Select all elements.

Removes all margins in document:

* { 
  margin:0px; 
}

Makes all borders blue inside of div:

div * { 
  border:1px solid #00F; 
  margin:5px; 
}
<div> <div>div <span>span</span></div> <span>span</span> <p>p</p> </div>
div span
span

p

id selector

Select element by id.

Colors text within span with id='red' #F00:

span#red { 
  color:#F00; 
}

Makes text within all elements with id='red' #F00:

#red { 
  color:#F00; 
}
<div> <div>div <span id='red'>span</span></div> <span>span</span> <p>p</p> </div>
div span
span

p

class selector

Select element by class.

Colors text within span with class='blue' #00F:

span.blue { 
  color:#00F; 
}

Colors text within all elements with class='blue' #00F:

.blue { 
  color:#00F; 
}
<div> <div>div <span class='blue'>span</span></div> <span>span</span> <p class='blue'>p</p> </div>
div span
span

p

type selector

Select element by type.

Makes all links bold:

a { 
  font-weight:bold; 
}
<div> <div>div <a href='#'>link</a></div> <span>span</span> <p>p <a href='#'>link2</a></p> </div>
div link
span

p link

descendant selector

Select element within element.

Makes all text bold for span tags within p tags:

p span { 
  font-weight:bold; 
}
<div> <div>div <span>span</span></div> <span>span</span> <p>p <span>span</span></p> </div>
div span
span

p span

direct descendant selector

Select child of element directly contained within.

Makes red border around first level of li tag, but not second:

div > ul > li { 
  border:1px solid #F00;
}
<div> <ul> <li> 1 <ul> <li>A</li> <li>B</li> </ul> </li> <li>2</li> </ul> </div>
  • 1
    • A
    • B
  • 2

adjacent selector

Select element directly after.

Makes p directly after h1 tags red:

h1 + p { 
  color:#F00 
}
<h4>This is an h4 title</h4> <p>This is the first p tag</p> <p>This is the second p tag</p> <p>This is the third p tag</p>

This is an h4 title

This is the first p tag

This is the second p tag

This is the third p tag

following selector

Selects all element after.

Makes all p tags following an h4 red:

h4 ~ p { 
  color:#F00 
}
<p>This is the first p tag</p> <h4>This is an h4 title</h4> <p>This is the second p tag</p> <p>This is the third p tag</p> <p>This is the fourth p tag</p>

This is the first p tag

This is an h4 title

This is the second p tag

This is the third p tag

This is the fourth p tag

attribute selector

Selects all elements with attribute.

Make all a tags with titles yellow:

a[title] { 
  color:#990;
}
<a href='javascript:;'>link1</a> <a href='javascript:;' title='link2'>link2</a> <a href='javascript:;' title='link3'>link3</a>

Set the background grey for all text inputs:

input[type='text'] { 
  background:#CCC; 
}

Make all links with 'example' anywhere in the href bold:

a[href*='example'] { 
  font-weight:bold; 
}

Make all links with 'http' at the start of the href italic:

a[href^='http'] { 
  font-weight:bold; 
}

Make all links with '.jpg' at the end of the href green:

a[href$='.jpg'] { 
  color:#0F0; 
}

pseudo-class selector

Select element by their state.

Makes all visited links red:

a:visited { 
  color:#F00 
}

Makes all links green on hover:

a:hover { 
  color:#0F0 
}

Add a red border to the span adjacent to only selected radio buttons:

input[type=radio]:checked+span { 
  border:1px solid #F00;
}
<input type='radio' name='r' checked='checked'> <span>On</span> <input name='r' type='radio'> <span>Off</span>
On
Off

info

I created this nifty little book using a couple of difference sources such as The 30 CSS Selectors you Must Memorize by Jeffrey Way, and I fiddled a bit with the Ribbon builder code to get my ribbon correct. The patterns used on the background, paper, and leather are modified from /subtlepatterns.com/>Subtle Patterns. Other than that, the rest is mine!