Learn CSS, Selectors, Part 3 - The Descendant Selector
(Page 2 of 4 )
The descendant selector gives you the ability to apply certain styling rules to an element only if a certain element is a descendant of it. For example, suppose that we have this piece of HTML code:
<p>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>
<span>The <strong>W3C</strong> is the organization of web standards</span></p>
The <p> element is the parent of the <a> element and the <span> element, and the <span> element is the parent of <strong> element. All of these elements are considered to be descendants of the <p> element, so we can say that the <strong> element is a descendant element of the <p> element (through one nested level). The <span> element is also a descendant (it's a child too).
Suppose that we need to have the <strong> element display a yellow background color only when it exists in the context of a <p> element. This means that we will apply this rule only when the <strong> element is a descendant of the <p> element, whether the <strong> element is a child of the <p>, or a child of an element that's a child of the <p> 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>
<p> 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>
<span> The <strong>W3C</strong> is the organization of web standards</span></p>
<p><strong>Testing strong inside a paragraph</strong></p>
<div><strong>Testing strong inside a div element</strong></div>
</body>
</html>
And here's the CC code:
p strong
{
background-color: yellow;
}
In the HTML code there are three <strong> elements; the first one is inside the first <p> element, inside the <span> element. The second <strong> element exists inside the second <p> element, and the third one exists inside the <div> element. As you can see, only the first two <strong> elements have been styled, because they are descendents of the <p> element. The first one exists inside a <span> element, which has the parent <p> element, and the second one exists inside the <p> element directly; both <strong> elements are considered to be descendants of the <p> 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 <p> element in the document that has a descendant <strong> element.
There's another way of saying it. We can say that we need to apply the rules whenever the <strong> element has the <p> 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 <p> element has a descendant <span> element which has a descendant <strong> element. If you modify the CSS descendant selector and reload the page, only the first <strong> element will be styled because it exists in the context of the <span> element, which in turn exists in the context of the <p> 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.
Next: The Child Selector >>
More Style Sheets Articles
More By Michael Youssef
