Universal Selector

Universal selectors are used to select any element.

Ex-* {color: blue; }
Type Selectors
The most common and easy to understand selectors are type selectors. Type select
ors will select any HTML element on a page that matches the selector, regardless
of their position in the document tree.
Ex-em {color: blue; }
Descendant Selectors
Descendant selectors are used to select elements that are descendants of another
element in the document tree.
For example, you may wish to target a specific <em> element on the page, but not
all <em> elements.
Ex-p em {color: blue; }
Child Selectors
A child selector is used to select an element that is a direct child of another
element (parent). Child selectors will not select all descendants, only direct c
hildren.
For example, you may wish to target an <em> that is a direct child of a <div>, b
ut not other <em> elements that are descendants of the <div>.
Ex-div > em { color: blue; }
Adjacent Sibling Selectors
Adjacent sibling selectors will select the sibling immediately following an elem
ent.
For example, you may wish to target an <h3> element, but only <h3> elements that
immediately follow an <h2> element.
Ex-h2 + h3 {margin: -1em; }
Attribute Selectors
Attribute selectors are used to select elements based on their attributes or att
ribute value.
Ex-
img[title] { border: 1px solid #000; }
img[src="small.gif"] { border: 1px solid #000; }
img[alt~="small"] { border: 1px solid #000; }
img[title|="small"] { border: 1px solid #000; }
Pseudo-classes
Pseudo-classes allow you to format items that are not in the document tree. They
include:
* :first-child
* :link
* :visited
* :hover
* :active
Ex-a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
Pseudo-Elements
":first-line" and ":first-letter"
These two pseudo-element selectors are based on traditional typesetting, where t
he first letter or the first line of text appears different to all other text on
 a page.
:first-line is the selector for the first line of an element, like a paragraph.
Ex-p:first-line {font-weight: bold; }
:first-letter is the selector for the first letter of an element, like a paragra
ph.
Ex-p:first-letter {font-size: 200%; font-weight: bold; }
:before and :after pseudo-elements
Ex-p:before
{
content:"Read this -";
background-color:yellow;
color:red;
font-weight:bold;
}
Ex-p:after
{
content:"- Remeber this";
}
Class Selectors
The class selector allows you to style items within the same (X)HTML element dif
ferently.You can use the same class selector again and again within an (X)HTML f
ile.Note that a class selector begins with a (.) period.
Ex-.big { font-size: 110%; font-weight: bold; }
div.big { color: blue; }
ID Selectors
IDs are similar to classes, except once a specific id has been declared it canno
t be used again within the same (X)HTML file.Notice that the id selector begins
with a (#) number sign instead of a (.) period, as the class selector does.
Ex-#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }