STYLE SHEETS

Learn CSS, Selectors, Part 3

This will be the last discussion about CSS selectors in this series. In this article we will discuss the descendant, child and sibling selectors, with numerous code examples. It is the sixth article in our series covering CSS.

Author Info:

By: Michael Youssef

Poor Best

Rating:

/ 18

June 20, 2005

TABLE OF CONTENTS:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link rel="stylesheet" href="Selectors.css" type="text/css">
 <title>CSS Selectors</title>
</head>
<body>
 <a href="home.html">Home</a>
 CSS is a wonderful styling language for the web
 Using CSS text and font properties to create good looking pages
 <a href="CSShome.html">CSS Home</a>
 This text will not be styled
</body>
</html>

Here's the CSS code:

p > span
{
background-color: blue;
color: white;
font-size: .9em;
font-family: Tahoma, Arial;
}

And here's the resulting Web page:

As you can see in the HTML code, there are three elements. The first element is a direct child of the first element in the document. The second is a direct child of the second element, but differs from the first element in just the order -- the first element exists after the <a> element and the second exists before it. I just wanted to show you that the order is not important with the child Selector. The third elements exist inside a element, which exists inside a element, so this element is not a direct child of the element. That's why the style will not be applied to it.

The syntax of this selector is very easy. Just use the greater than (>) symbol between the parent and the child. So if is the parent and is the child you write the CSS child selector as p > span{}. You can remove the white spaces here, so it can look like p>span or p> span -- it doesn't matter. You can read it as the span element has a direct element as the parent or you can read it the other way, the element has a direct element as the child.

The interesting point about the child selector is that you can use more than one level of nesting. In other words, you can state that a certain element has a direct parent, which is in turn has a specific direct parent, and so on. For example, suppose that you need to set some styling rules to the element, which has a direct element as the parent, which in turn has a direct element as the parent, which in turn as a direct <TD> element as the parent (this tree must exist in this series of direct parent-child relationships). You can use the child selector as follows:

td > p > span > strong
{
background-color: YellowGreen;
color: white;
font-size: .7em;
font-family: Tahoma, Arial;
}

Next: Direct Adjacent Sibling Selector >>