CSS selectors

I just read the ">" and "+" symbol in CSS. So I found some reference to understand how it works. If the simple example is too simple to understand, please reference the hyperlinks.

wide range selectors

h1, h2, h3, h4 { text-align: center; }
.highlight p, .highlight ul { margin-left: 10px; }
#main p { padding-top: 10px; }

type selectors(element selectors)

h1 { text-align: center; }

class selectors

/*simple class selector*/
.big { text-align: center; }
<p class="big">This is some text</p>

/*combining class and type selectors*/
p.big { color: blue; }
div.big { color: red; }

/*combining multiple classes*/
.big { font-weight: bold; }
.indent { padding-left: 2px; }
<p class="big indent">

ID selectors

#navigation { width: 50%; color: #333; }
div#navigation { width: 50%; color: #333; }

descendant selectors

p span { color: red; }
<p>This is a <span>test</span></p>

child selectors

p > span { color: red; }
<p>This is a <span>test</span></p>
<span>outside p element test</span>

NOTE: not supported by Windows Internet Explorer 5, 5.5 and 6

Adjacent sibling selectors

p + span { color: red; }
<p>This is a <span>test</span></p>
<span>outside p element test</span>

NOTE: not supported by Windows Internet Explorer 5, 5.5 and 6

Attribute selectors

input[type=text] { width: 50%; }
<input type="text" value="text" />
<input type="button" value="button" />

NOTE: not supported by Windows Internet Explorer 5, 5.5 and 6

Pseudo-classes

/*element hierarchy*/
:first-child
/*hyper link styling*/
:link
:visited
/*mouse over*/
:hover
/*mouse down*/
:active
/*other*/
:focus
:lang(n)

NOTE: not supported by Windows Internet Explorer 5, 5.5 and 6

Pseudo-elements

/*the first letter or the first line of text appears*/
:first-line
:first-letter
/*before or after an element on the page*/
:before
:after

NOTE: not supported by Windows Internet Explorer 5, 5.5 and 6

Reference:
Selectutorial - CSS selectors