CSS Class selectors

In this post, I wanted to document various CSS class selectors. These are as follows

/*
* CSS class
* <div class="classname">Any HTML element having the css class</div>
* <a class="classname">Any HTML element having the css class</a>
*/
.class1 {
 background-color: ##ecf0f1;
}

/*
* HTML Element
* <div>Directly reference a specific HTML element in css</div>
*/
div {
 background-color: ##ecf0f1;
}

/*
* HTML Element
* <div class="classname">Directly reference a specific HTML element in css with a specific class</div>
*/
div.class1 {
 background-color: ##ecf0f1;
}

/*
* Multiple classes
* <div class="class1 class2"> </div>
*/
.class1.class2 {
 background-color: ##ecf0f1
}

/*
* HTML Child
* <div><span> Select direct child of specific html element</span></div>
*/
div > span {
 background-color: ##ecf0f1;
}

/*
* HTML Descendent
* <div><p><span> Select a descendent of specific html element</span></p></div>
*/
div span {
 background-color: ##ecf0f1;
}

/*
* HTML Sibling
* <div></div><span> Select a sibling of specific html element</span></p></div>
*/
div + span {
 background-color: ##ecf0f1;
}

More syntax is listed at http://www.w3schools.com/cssref/css_selectors.asp