http://megdal.be

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='http://example.com'>link1</a> <a href='http://example.com' title='link2'>link2</a> <a href='http://example.com' 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 Subtle Patterns. Other than that, the rest is mine!

If you like this, check my website http://megandalbey.com