Names separated by whitespace match elements specified by the last name. The other names must occur somewhere on the road from root to this element . They are ancestors of this element (1). If the element names are separated with [>], the element on the right must be directly inside the left element (a child) (2). The character [*] can be used to achieve some interesting effects. In the (3) grand-children of AAA element are red colored. The ddd2 element while not a granchild is also colored as it inherits color from its parent
| XML Source | CSS stylesheet | Example link |
|---|---|---|
|
(1)
<AAA> <BBB> <DDD>ddd1 <DDD>ddd2</DDD> </DDD> </BBB> <CCC> <DDD>ddd3</DDD> </CCC> <DDD>ddd4</DDD> <OOO> <PPP> <RRR>rrr1</RRR> </PPP> </OOO> <RRR>rrr2</RRR> </AAA> | AAA CCC DDD {color:blue} BBB DDD {color:maroon} OOO RRR {color:red} | View output |
| XML Source | CSS stylesheet | Example link |
|
(2)
<AAA> <BBB> <DDD>ddd1 <DDD>ddd2</DDD> </DDD> </BBB> <CCC> <DDD>ddd3</DDD> </CCC> <DDD>ddd4</DDD> <OOO> <PPP> <RRR>rrr1</RRR> </PPP> </OOO> <RRR>rrr2</RRR> </AAA> | AAA > CCC > DDD {color:blue} BBB > DDD {color:maroon} OOO > RRR {color:red} | View output |
| XML Source | CSS stylesheet | Example link |
|
(3)
<AAA> <BBB> <DDD>ddd1 <DDD>ddd2</DDD> </DDD> </BBB> <CCC> <DDD>ddd3</DDD> </CCC> <DDD>ddd4</DDD> <OOO> <PPP> <RRR>rrr1</RRR> </PPP> </OOO> <RRR>rrr2</RRR> </AAA> | AAA > * > * {color:red} | View output |