CSS Selectors: Pattern Matching and Inheritance

By: Adrian Senior

Page 1 of 2

Set for printing

Next

An introduction to CSS is available here.

If you are unsure of the elements of a CSS rule or you are new to CSS in general I would recommend you read this article first "CSS: An Introduction." This will give you the basic terminology you will need to follow this article.

A word about doc types

To allow our documents to render correctly cross browser, we need to use a doc type above the opening html tag. This, of course, also applies to the rendering of our CSS. If we do not use a doc type our results may differ wildly from any given browser to another. If you are unsure of what a doc type is and need further information on this aspect of your documents Holly Bergevin has written a great article here.

Pattern matching our css selectors.

The patterns we can apply using our selectors are varied. We will begin by taking a look at what pattern matching is, how it works, and how it can help to define and organize the rules within our style sheets. Getting a handle on pattern matching, will enable us to open our documents up to styling to a greater degree than if we completed our CSS element by element.

Our selectors, and therefore our rules, are dependant on the document tree. Nope, this does not grow in the Amazon Rain Forest. It actually lives in Dreamweaver MX (well, as far as we are concerned it does). It also, of course, lives inside every html document regardless of whether that document is ColdFusion, .asp, .aspx or php based; the language we use is irrelevant. What we are interested in here is the raw basic mark up that is the basis of our html documents.

To see this we will open a new document in Dreamweaver MX. For ease of viewing, I have omitted the doc type from the code below. Always use a doc type for your documents to obtain consistent results in a cross browser manner. Let's take a look at Code block 1.

Code block 1

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

</body>
</html>

In the document tree every element has a parent element except the root element. You may not see the document tree so clearly in Code block 1, but it is there. Let me explain a little. The root element in the code above is the html element. The root element has no parent, and its children which come directly below it in the document tree are the body and head sections. Let's look at Tree view 1 to see how this lays out more clearly.

At this point we need to realize that the document tree is not representative of the code we see in Dreamweaver MX. In code view, the code flows from top to bottom. But when our code is processed, it is processed in the flow of the tree view. We will see how this effects our code a little later in the article.

Tree view 1

As we can see from Tree view 1, we clearly have a root element in our document. The body and head areas of our document are children of that root element. Furthermore, the head element has a child element called title. It is worth pointing out at this stage that a child element can only have one parent element and the parent element will be the next item up on the document tree. Let's take a look at Tree view 2 to see how the document tree progresses as we start to build our document.

Within the support files is a document called sibling.html. You can open this page in Dreamweaver MX to use as a "work along page." The CSS you need is embedded in the head of that document.

Tree view 2

As you can see, we have now added the h1 tag into the body of our document in Dreamweaver MX. This results in an addition to the document tree as shown in Tree view 2. The h1 tag is now in place and it falls under the body tag. The body tag is now a parent to the h1 and a child to the the html root element. Let's expand on this one more step and add a second item into our Dreamweaver MX document. This time we will add the h2 tag. This changes the document tree to the appearance shown in Tree view 3.

Tree view 3

Now you can see that the body has two children, our h1 and our h2 elements. This means that our h1 and h2 elements are in fact related as they have the same parent. They are known as siblings. This is a word I want you to remember. It is important when we want to define certain patterns in our CSS rules. When we understand the relationship between our elements, it makes our CSS rule definitions much easier to code. Provision is made for the use of styling our CSS elements by the use of selectors, and more importantly, our selectors can make use of the element's relationships within our document tree.

This enables us to provide different values for any given element. We can style a completely new set of values for the element to use according to its relationship in the document tree with one of its siblings. Sound complicated? Well it's not really. Let's look at the sibling relationship. To see this in action, we will add a second h2 tag to our Dreamweaver MX document. This gives us a document tree as shown in Tree view 4.

Tree view 4

Page 1 of 2 1 2 Next


download
Download Support Files


Keywords
CSS, document tree, selectors, combinators, sibling selectors,