CSS Selectors for Reference

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; 
}

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; 
}

type selector

Select element by type.

Makes all links bold:

a { 
  font-weight:bold; 
}

descendant selector

Select element within element.

Makes all text bold for span tags within p tags:

p span { 
  font-weight:bold; 
}

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;
}

adjacent selector

Select element directly after.

Makes p directly after h1 tags red:

h1 + p { 
  color:#F00 
}

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 
}

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;
}

link1
link2
link3

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;
}

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!