CSS design basics with Dreamweaver – Part 6: Defining and using descendant selectors

To date you have learned about type, class and ID selectors. In part 6 of this tutorial you will use all three of these selectors to build descendant selectors.

Descendant selectors are a powerful tool in your CSS armory; they allow you to map styles deep into the structure of your web pages by using the document tree to target specific elements within your layout. Within this tutorial, you will discover how Adobe Dreamweaver displays the document tree to aid you in the mapping process of your descendant selectors.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

• Try
• Buy

Sample files:

• css_best_pt6.zip (ZIP, 1K)

Prerequisite Knowledge

• CSS design basics with Dreamweaver – Part 1: Learning about doctype
• CSS design basics with Dreamweaver – Part 2: Styling (X)HTML elements
• CSS design basics with Dreamweaver – Part 3: Margins and padding
• CSS design basics with Dreamweaver – Part 4: Defining and using class selectors
• CSS design basics with Dreamweaver – Part 5: The ID selector

Understanding descendant selectors

Simply put, a descendant selector consists of two or more selectors working together to style a specific element within your web page. Each of the selectors that make up your descendant selector is separated by a space; this space is known as a descendant combinator. In plain English, you could say the descendant combinator issues an instruction to look inside the previous selector. This probably doesn't make sense at this point, but it will soon.

Let's look at a simple type selector for a p element.

p {
  color: #ff0000;
}

Listing 1. A simple p selector.

From earlier tutorials you know that the rule shown in Listing 1 will turn all text in p elements red. This is great, unless of course you want the text in your p elements to be a different color in a different section of your web page. If that is the issue, then rule above just won't do the job for you. In this scenario, you will have to use a descendant selector. Within the sample files linked from the beginning of this tutorial, you will find a file named 1.html. Open this page in Code view.

<div id="top">
  <p>Some text in your top div</p>
</div>
<p>Some text not in your top div</p>

Notice that one paragraph sits inside a div tag with an ID attribute of top, while the other paragraph is outside the top div tag. Remember this structure as you will need to refer back to it in a short while.

Switch to Design view and complete the following steps:

1. Press Shift + F11 to open the CSS panel.
2. Click the New CSS Rule icon.
3. Select the Tag (redefines the look of a specific tag) option.
4. Type p into the Tag: pop-up menu.

5. Select the This document only option.

   

   Figure 1. The New CSS Rule dialog box redefining the p tag

6. Click OK. The CSS Rule Definition dialog box opens.
7. Select the Type option from the Category list.
8. Click the Color cube.
9. Select red (#ff0000).
10. Click OK.

All the text in your page will now be red.

This is expected behavior. Your CSS rule currently specifies to find all text within p elements and display it as the color red. This is somewhat limiting when you need to present information in a different color...enter the descendant selector.

With your page open in Design view, click inside the text that says “Some text in your top div” and look at the quick tag selector in the bottom left corner of Dreamweaver as shown in Figure 2.

Figure 2. The Quick Tag Selector

Notice how Dreamweaver displays the page hierarchy from the element you have clicked inside. You have clicked with the p element, and Dreamweaver shows you that the parent element is the top div and that top is an ID selector. This is indicated by the presence of the pound (#) sign as I discussed in the previous tutorial. The next element to the left of the top div is the body element. This tells you that the parent element of the top div is the body element. The parent of each element is the element shown to the left in the quick tag selector. The information displayed is known as the document tree.

Click inside the lower text in Design view.

Figure 3. The Quick Tag Selector

You already know that this text does not reside within the top div, and this is reflected in the quick tag selector as shown in Figure 3. With your two text elements having different paths in the document tree, you can easily target each individually and style them differently by using a descendant selector.

Complete the following steps:

1. Press Shift + F11 to open the CSS panel.
2. Click the New CSS Rule icon.
3. Select the Advanced (IDs, pseudo-class selectors) option.

4. Type #top p into the Selector combo box.

   Note the space between the #top p that you type into the Selector combo box. This space is very important!

5. Select the This document only option in the Define in: section.
6. Click OK. The CSS Rule Definition dialog box appears.
7. Select the Type option in the Category list.
8. Click the Color cube.
9. Select the blue (#0000ff).
10. Click OK.

The text at the top of your page that is within the top div will now turn blue. The text that isn't within the top div will remain red.

Switch to Code view so you can see your descendant selector. The code appears like that shown in Listing 3.

<style type="text/css">
<!--
p {
    color: #FF0000;
}

#top p {
    color: #0000FF;
}
-->
</style>

Listing 3. Your style sheet

It is the second selector that you are interested in. This is the descendant selector.

#top p {
  color: #0000FF;
}

Listing 4. The descendant selector.

The rule is saying to the browser as the page loads, “See if you can find an element that is an ID element with a name of top. If you do, look inside that element and see if there is a p element. If there is, please make that text blue.”

The text that is not in the top div doesn't meet the mapping structure of the descendant selector as it is not within the top div, so it stays red. If you cut and paste the bottom text so it resides within the top div, it will of course turn blue as it would now suit the structure required by the descendant selector.

Switch back to Design view and highlight the word top in the blue text, right click, and from the context menu, select the Quick Tag Editor as shown in Figure 4.

Figure 4. The Quick Tag Editor

Type span into the Wrap tag: section as shown in Figure 5.

Figure 5. The Wrap tag dialog

Press enter to apply the Wrap tag: setting, and the dialog box will close and place span tags around the word top.

Click inside the word top and you will see how Dreamweaver has updated the document tree hierarchy. The span tag is now also shown, and you can read the document structure by reading the tags to the left back to the body tag.

From this you can see that to target the span tag, you will need a descendant selector structured as follows: #top p span. There is no need to include the body element in the selector as the body is the parent element of all elements

Figure 6. The updated document tree

Complete the following steps:

1. Press Shift + F11 to open the CSS panel.
2. Click the New CSS Rule icon.
3. Select the Advanced (IDs, pseudo-class selectors) option.
4. Type #top p span into the Selector combo box.
5. Select the This document only option in the Define in: section.
6. Click OK. The CSS Rule Definition dialog box appears.
7. Select the Type option in the Category list.
8. Click the Color cube.
9. Select the black color (#000000).
10. Click OK.

The word top now appears in black. Switch to Code view and you will be able to see your newly created descendant selector.

#top p span {
  color: #000000;
}

Listing 5. Your new descendant selector

Conclusion

In this tutorial you have learned how you can structure your descendant selectors to map them into specific elements within your web page using the document tree. You have seen how Dreamweaver will give you the position of an element within the document tree to enable you to easily structure your descendant selectors.

Descendant selectors can of course consist of all types of selectors. You can use class selectors, type selectors and any other type of selectors within a descendant selectors structure. Why not experiment with the document you have been working on and build on the knowledge you have gained in the article?

About the author