CSS 2 Selectors

CSS HTML RESULT
* { color:#555; } Normal text Normal text
b { color:red; } <b>Bold text</b> Bold text
.classname { color:blue; } <div class='classname'>A div element using the class 'classname'.</div>
A div element using the class 'classname'.
#idname { background:cyan; } <div id='idname'>A div element using the ID 'idname'.</div>
A div element using the ID 'idname'.
span em { color:green; } <span>A span with <em>emphasised text</em> and another <span>span inside also containing <em>emphasised text</em></span></span>. A span with emphasised text and another span inside also containing emphasised text.
div > em { background:lime; } <div>A div element with <em>emphasised text</em> and a <span>span also containing <em>emphasised text</em></span>.</div>
A div element with emphasised text and a span also containing emphasised text.
i + b { color:orange; } <i>Italic text</i> then plain <b>then bold text</b> then plain <b>then bold text again</b>. Italic text then plain then bold text then plain then bold text again.
u ~ s { color:blue; } <u>Underlined</u> then plain <s>then strikeout</s> <u>then underlined</u> then plain <s>then strikeout text again</s>. Underlined then plain then strikeout then underlined then plain then strikeout text again.
a[href='info.htm'] { color:red; }
a:hover { font-weight:bold; }
<a href='http://google.com'>Google</a> <a href='info.htm'>Info</a> Google Info
p:first-letter { font-size:300%; } <p>This is a paragraph.</p>

This is a paragraph.