XML Transforms

Selector (CSS2)

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.