Thursday, January 3

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.