Descendant selectors apply style based on whether one element is a descendant of another. In CSS, descendant means an element that is a child, grandchild, great grandchild, and so on, of another element. This type of relationship is referred to as an ancestral relationship. Take for example the document in Figure 3-14. If you were looking to map the ancestral relationship between the elements in Figure 3-14, you would see a tree like that in Figure 3-15.
Figure 3-14
Figure 3-15
As a web designer, you get used to visualizing markup documents as a tree. Perhaps not as a real tree, as you see in Figure 3-15, but visualizing the lineage of an element. The concept of ancestral relationships between elements is a fundamental cornerstone to web development. Ancestral relationships play a large role in CSS development.
Descendant selectors apply style based on the lineage of an element. Keeping in mind the markup presented in Figure 3-14, one example of a descendant selector appears in Figure 3-16.
Figure 3-16
Descendant selectors are used to select an element based on the context it appears in the document. In the example code in Figure 3-16, you select a element with an inline-code class name, and apply the monospace font to it, but only if the inline-code element is a descendant of the
element with a body id name.
Descendant selectors aren’t limited to just two elements; you can include more elements in the ancestral lineage, if it suits your needs. Each selector in a descendant selector chain must be separated by a space. This is demonstrated in code in Figure 3-17.
Figure 3-17
In fact, the entire lineage from the eldest ancestor, the element, down through the generations to the element you want to select, can be included in a descendant selector chain.
Descendant selectors can also be combined with the universal selector. You can see an example of this in Figure 3-18.
Figure 3-18
The universal selector can appear in any part of a descendant selector. When it is included, it is a wild-card. In Figure 3-18, you select all descendants of the body
element.
element, those elements receive a yellow background.
| Tip | In the CSS level 1 specification, descendant selectors are referred to as contextual selectors. The name change was made in the CSS level 2 specification. The name change likely resulted from new selectors in CSS 2, several of which can also be considered contextual because their selection is based on the context in which the target element appears in the document. |
Example 3-3. To see how descendant selectors work, follow these steps.
- Enter the following markup into your text editor:
2.
3.
4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5.
6.
7. Descendant Selectors
8.
9.
10.
11.
Descendant Selectors
12.
13. Descendant selectors apply styles based on ancestral relationships.
14. The first descendant example I present applies style to the
15. <span> element named code,
16. which is a descendant of <p> elements.
17. To do this, the selector p span.code is used.
18.
19.
20. Using CSS, styles can be applied to any number of documents. Since
21. this is the case, there may be <span>
22. elements with a class name of code in several documents, but
23. have different styles applied depending on the context it appears,
24. which is the exact situation the inventors of the descendant
25. selector had in mind when it was conceived.
26.
27.
28. The note text is given different styles. To do this another descendant
29. selector is used. This time the selector is p.note
30. span.code
31.
32.
33.
- Save the preceding document as Example_3-3.html.
- Enter the following CSS in a new document in your text editor:
4.
5. body {
6. font-face: sans-serif;
7. }
8. h1 {
9. margin: 5px;
10.}
11.p {
12. border: 1px solid rgb(200, 200, 200);
13. background: rgb(234, 234, 234);
14. padding: 5px;
15. margin: 5px;
16.}
17.p.note {
18. background: yellow;
19. border: 1px solid gold;
20.}
21.span.code {
22. font-family: monospace;
23. padding: 0 10px;
24.}
25.p span.code {
26. background: yellow;
27.}
28.p.note span.code {
29. background: lightyellow;
30.}
- Save the preceding CSS as Example_3-3.css. This example results in the output you see in Figure 3-19.
32. Figure 3-19
33. How It Works
34. Descendant selectors apply style based on an ancestral relationship. The first example of descendant selectors that you see in Example 3-3 is p span.code. This selector selects elements with class names of code, but only when they appear as descendants of
elements. That is to say, when a element exists in the document and it has a class name of code, and it is the child, grandchild, great grandchild, and so on, of a element, those elements receive a yellow background.
35. The second example of descendant selectors in Example 3-3 is p.note span.code, where two type and class selectors are included in a descendant selector. In this selector any
elements appearing in the document with a class name of note that have descendant elements, which have a class name of code, receive lightyellow backgrounds.Descendant selectors allow you to apply style based on ancestral relationships. In the next section, you see a similar selector, the direct child selector, which also applies style based on an ancestral relationship, but a narrower, more specific ancestral relationship, parent and child.
No comments:
Post a Comment