Cascading Style Sheets/Pattern

Introducing the (X)HTML Document Tree
The document hierarchy of an (X)HTML document can be likened to a family tree. This can be seen if we take a look at a basic example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If we present the above example in a different way, the relationships and hierarchy of the elements becomes immediately apparent.

html |       body |       div /\       /  \     img    p

In describing the tree/hierarchy in this example we can say that the  element is a child of the   element, just as   is a child of   and   and   are both children of   and siblings to each other. is the ancestor of  as   is indirectly descended from.

Targeting Elements within the Hierarchy
Suppose we were to create a rule such as. This would cause each paragraph throughout the document to be in blue. However, if we want to be a bit more "picky" about which elements are affected we can define the context under which this rule gets applied. If only paragraphs within  elements should be in blue the rule needs to be. Now, say that only paragraphs in one  element, defined by a certain ID are to be blue. We could then refine our target region by having.