How to use CSSSelector in selenium webdriver ?

How to locate webelement using CSSSelector in selenium webdriver ?

1. <Tag Name>#<[id='value']> for search with id
2. <Tag Name>.<[classname='value']> for search with classname
3. <Tag Name><[Attributename*='value']> for partial search
4. <Tag Name><[Attributename^='value']> for start with
5. <Tag Name><[Attributename$='value']> for ends with
6. <Tag Name><[Attributename='value'] for exact content match of single attribute
7. <Tag Name><[Attributename1='value'][Attributename2='value'] for exact content match of more than one attributes
8. ParentTagName > ChildTagName[AttributeName='value'] for finding through unique parent. Use greater than sign.
9. ParentTagName[AttributeName='value'] > TagName for finding direct child
10. ParentTagName[AttributeName='value'] TagName for finding all direct and indirect child(Sub child)
11. nth-child(n): Example is .classname > TagName:nth-child(1)
12. nth-last-child(n): Example is .classname > TagName:nth-last-child(1)
13. first-child: Example is .classname > TagName:first-child
14. last-child: Example is .classname > TagName:last-child
15. Sibling: Example is .classname > TagName:nth-child(1) + TagName
16. All sibling:  Example is .classname > TagName:nth-child(1) ~ TagName
17. Identify checked checkbox: Example is <TagName>:checked

If you have following questions then ask in comment. I'll answer on that so you can understand CSSSelector concept:

1. What is Tag Name?
2. What is Attributename?
3. What is value?
4. What is Parent Tag?
5. What is Sibling
6. What is Child?