Specify a style for an element based on its parent. (Child)
<P> <H1>Heading</H1> </P>
P > H1 { font-weight: bold; }
Only apply the style if the H1 element is a child of the P element.
Specify a style for an element based on the previous element. (Adjacent)
<H1>Heading</H1> <P>paragraph</P>
H1 + P { font-weight: bold; }
Only apply the style to the 'P' element if the H1 element came before the P element.
Specify a style for an element based on the it's attribute. (Attribute)
<H1 index="0">Heading</H1> <H1 index="1">Heading</H1>
H1[index] { font-weight: bold; }
Only apply the style to a H1 element with an 'index' attribute.
H1[index="1"] { font-weight: bold; }
Only apply the style to a H1 element with an 'index' attribute with a value of '1'.
H1[index~="1"] { font-weight: bold; }
Only apply the style to a H1 element with an 'index' attribute which has a value of '1' in it's (white-space separated) list of values.
H1[index|="1"] { font-weight: bold; }
Only apply the style to a H1 element with an 'index' attribute which has a value of '1' to start it's (hyphen separated) list of values.
Specify a style for an element based on a dynamic class. (Dynamic pseudo-classes)
<A HREF="test">test string</A>
A:active { font-weight: bold; }
Only apply the style to the 'A' element if the element is being 'activated' by a user.
A:hover { font-weight: bold; }
Only apply the style to the 'A' element if the element is 'pointed at' by a user.
A:focus { font-weight: bold; }
Only apply the style to the 'A' element if the element has been 'focused' by the user.
Specify a style for an element if that element is a 'hyper-link'. (Link pseudo-classes)
<A HREF="test">test string</A>
A:link { font-weight: bold; }
Only apply the style to the 'A' link-element if the link has not been visited.
A:visited { font-weight: bold; }
Only apply the style to the 'A' link-element if the link has been visited.
Specify a style for an element if that element is the 'first-child'. (first-child pseudo-class)
<P> <A HREF="test">test string</A> <A HREF="test">test string</A> </P>
A:first-child { font-weight: bold; }
Only apply the style to the 'A' element if the element is the first child.