Some CSS styles that I can use

I'm reading a book of "PLUG-In CSS" and I found some styles that I can use:

1, Encapsulation:

P:before {content:'\201c';"}
P:after {content:'\201d';"}

2,Symbols:
add a checkmark for class CheckmarkButton:

.CheckmarkButton:before{content:'\2713';}

add a crossmark for all button that has value="Cancel" property:

form input [value="Cancel"]:before{content:'\2715';}

3, Progress Bar, showing green for finished progress, red for unfinished:

< div class='progressbar' >< div style='width:65%' / > < /div >
.progressbar {
  position:relative;
  width:120px;
  height:15px;
  border-width: 1px;
  border-style:solid;
  border-color:Black;
  background-color:Red;
  }
.progressbar div{
  position:absolute;
  height:15px;
  top:0px;
  left:0px;
  background-color:Green;
}

4, Odd and Even Background Colors

< table class="striptable" >
.striptable tr:nth-child(odd) {background:Grey;}

This "nth-child()" is an interesting selector. You can use "nth-child(3n+2)" to select 2nd, 5th, 8th, 11th, etc elements.
This selector is not working in IE8 and below.

The pesudo-classes are new to me. Here is a list from W3cSchools:

All CSS Pseudo Classes/Elements

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
:first-letter	p:first-letter	Selects the first letter of every element
:first-line	p:first-line	Selects the first line of every element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:before	p:before	Insert content before every element
:after	p:after	Insert content after every element
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with "it"

I will use these newly learnt technique into this blog.