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:

The element is the parent of the <a> element and the element, and the element is the parent of element. All of these elements are considered to be descendants of the element, so we can say that the element is a descendant element of the element (through one nested level). The element is also a descendant (it's a child too).

Suppose that we need to have the element display a yellow background color only when it exists in the context of a element. This means that we will apply this rule only when the element is a descendant of the element, whether the element is a child of the , or a child of an element that's a child of the element. This can be explained better with an example.

<!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>
 You can use CSS with markup languages like HTML, XHTML and XML. All those markup languages and also CSS has Specifications as the <a href="http://www.w3.org">W3C website</a>
 The W3C is the organization of web standards
 Testing strong inside a paragraph
 <div>Testing strong inside a div element</div>
</body>
</html>

And here's the CC code:

p strong
{
background-color: yellow;
}

In the HTML code there are three elements; the first one is inside the first element, inside the element. The second element exists inside the second element, and the third one exists inside the <div> element. As you can see, only the first two elements have been styled, because they are descendents of the element. The first one exists inside a element, which has the parent element, and the second one exists inside the element directly; both elements are considered to be descendants of the element, but the third one is not because it exists inside a <div> element.

The syntax of the descendant selector is very easy. You just put the ancestor element, followed by a space, then followed by the descendant element, as in the above CSS code, p strong {}. It's more like saying we need to apply the rules whenever there's a element in the document that has a descendant element.

There's another way of saying it. We can say that we need to apply the rules whenever the element has the as an ancestor. Actually, there's no obligation as to the number of elements you use in the descendant selector, so you can write something like this:

p span strong
{
background-color: yellow;
}

This means that we will apply the styling rules when the element has a descendant element which has a descendant element. If you modify the CSS descendant selector and reload the page, only the first element will be styled because it exists in the context of the element, which in turn exists in the context of the element. Note that in the CSS 1 called the descendant selector as the contextual selector. It has the same meaning, but descendant is better usage.