| When a tag is surrounded by another tag, one inside another, we say that the tags are nested. In a nested set, the outer tag is called the parent, and the inner tag is the child. The child tag and any children of that tag are the parents' descendants (for more details see "Inheriting Properties from a Parent" later in this chapter). Two tags in the same parent are siblings, and two tags immediately next to each other are adjacent siblings. So far, we have discussed ways to specify the styles of an individual element, regardless of where it is in the page. However, CSS also lets you specify the style of an element depending on its context. Using contextual selectors, you can specify styles based on where tags are in relationship to other tags, classes, or IDs on the page (Table 2.1). There are several contexts for which CSS allows us to style: Descendant selectors let you specify the style of a selector based on its position in the HTML code in relation to other selectors. Due to limitations in earlier versions of Microsoft Internet Explorer, this is currently the only reliable way to set contextual styles. Child selectors let you specify the style of elements that are the children (i.e., direct descendants) of another selector. Adjacent sibling selectors let you specify the style of a selector that immediately follows and shares the same parent as another selector. Universal selectors let you use a wildcard selector in place of an HTML selector.
Table 2.1. Contextual SelectorsFORMAT | DESCRIPTION | COMPATIBILITY |
|---|
a b c | Descendant | IE4, FF1, O3.5, S1, CSS1 | a>b | Child | IE5[*] FF1, O3.5, S1, CSS1 | a+b | Adjacent | IE7, FF1, O5, S1, CSS2 | [*] | Universal | IE7, FF1, O4, S1, CSS2 |
[*] Mac only. IE7/Windows
Descendant Selectors As discussed in "Inheriting Properties from a Parent" earlier in this chapter, descendants are the elements nested within an element, including the direct descendants (children). We can style individual descendant elements depending on their parent selector or selectors in a space separated list. The last selector will receive the style if (and only if) it is the descendant of the preceding selectors. For example, if we wanted to prevent the italics tag from being bold if it is within the bold tag of text in the copy section of a page, we can specify that, as shown in Figure 2.24. Figure 2.24. The general syntax for a contextual descendant selector. 
In this example (Figure 2.25), if the italics tag occurs and the parent is a bold tag with the ID copy, then the text will be larger, red, and a block-level element. Figure 2.25. When the selector order is right, the text in the final selector's element is large and red. 
To define descendant selectors: 1. | #copy b i {...}
Type the HTML selector of the parent tag, followed by a space. You can type as many HTML selectors as you want for as many different parents as the nested tag will have, but the last selector in the list is the one that receives all the styles in the rule. You can specify exactly how a tag is styled based on where it is nested in the code and who its parents are (Code 2.13).
Code 2.13. <i> tags that are nested within a<b> tag nested within the copy ID will receive the style.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Defining Tags in Context | Descendent</title> <style type="text/css" media="all"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; background-color: #fff; color: #000000; margin: 8px; } #copy b i { color: red; font-size: 2em; display: block; } </style> </head> <body> <div ><b><i>'Curiouser and curiouser!'</i></b></div> <div> <b><i>'Curiouser and curiouser!'</i></b><br /> <i>'Curiouser and curiouser!'</i> </div> </body></html>
|
| 2. | <div ><b><i>...</i></b></div>
The style will be applied if, and only if, the final selector occurs as a descendant nested somewhere within the previous selectors.
|
 Tips
Like grouped selectors, contextual selectors can include class selectors (dependent or independent) and/or ID selectors in the list, as well as HTML selectors. It is important to understand that descendant contextual selector styling is an incredibly powerful tool in Web design. When we examine layout techniques later in the book (Chapter 21), you'll discover that using contextual selectors lets you move HTML code around in your page and have it automatically restyled.
Child Selectors If you want to style only a parent's child elements (not a "grandchild" descendant), you must specify the parent selector and child selector separated by a chevron (>). Figure 2.26 shows the general syntax of child contextual selectors. Figure 2.26. The syntax for child contextual selectors. 
In this example (Figure 2.27), only if the italics tag is within a bold element but not within another element will the text in the <i> tag be larger, red, and a block-level element. Figure 2.27. The second selector is the child of the first, so the text in the second element is large and red. 
To define child selectors: 1. | b>i {...}
Type the selector for the parent element (HTML, class or ID), followed by a chevron (>) and the child selector (HTML, class or ID) to which you want to apply the styles (Code 2.14).
Code 2.14. <i> tags that are the direct child of a <b> tag are styled as red, large, and a block element.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Defining Tags in Context | Child</title> <style type="text/css" media="all"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; background-color: #fff; color: #000000; margin: 8px; } b>i { color: red; font-size: 2em; display: block; } </style> </head> <body> <div> <b><i>'Curiouser and curiouser!'</i></b><br /> <b><span ><i>'Curiouser and curiouser!'</i></span></b><br /> <i>'Curiouser and curiouser!'</i> </div> </body></html>
|
| 2. | <b><i>...</i></b>
If, and only if, the second selector is an immediate child element nested in the element will the styles from Step 1 be applied. Placing the tag within any other HTML tags will disrupt the pattern.
|
Adjacent Sibling Selectors Known as the adjacent sibling selector, this grouping lets you define a style for the first occurrence of a tag that appears immediately after another tag. Figure 2.28 shows the general syntax of adjacent sibling contextual selectors. Figure 2.28. The general syntax for adjacent sibling contextual selectors. 
In this example (Figure 2.29), the first italics tag that occurs immediately after a bold tag will be a block-level element that is larger and red. Figure 2.29. When the second tag is placed immediately after the first, the text is large and red in the second element. 
To define adjacent sibling selectors: 1. | b + i {...}
Type the selector for the first element (HTML, class or ID), a plus sign (+), and then the selector (HTML, class or ID) for the adjacent element to which you want the style applied (Code 2.15).
Code 2.15. When an <i> tag occurs directly after a<b> tag, the style is applied.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Defining Tags in Context | Adjacent</title> <style type="text/css" media="all"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; background-color: #fff; color: #000000; margin: 8px; } b + i { color: red; font-size: 2em; display: block; } </style> </head> <body> <div> <b>'Curiouser and curiouser!' </b> <i>'Curiouser and curiouser!' </i> <i>'Curiouser and curiouser!' </i> </div> </body></html>
|
| 2. | <b>...</b><i>...</i>
The styles will be applied to the second selector if, and only if, the second selector occurs immediately after first selector. Placing any tag between them (even a break tag) will disrupt the pattern.
|
The Universal Selector The universal selector is a wild card character that works as a stand-in to represent that any HTML type selector can appear in that position in a contextual list. The general syntax for using a universal selector is given in Figure 2.30. Keep in mind, though, that the universal selector can be used in place of any HTML selector in any configuration, not just in the descendant selector shown in this section. Figure 2.30. The general syntax for a universal selector. 
In this example (Figure 2.31), a universal selector is used in a descendant selector, meaning that any italics tag which has a "grandparent" one level above that uses the #copy ID will be a block-level element that is larger and red, regardless of which HTML tags are in between. However, if the #copy ID is more or less than one level up, the styles are not applied. Figure 2.31. Regardless of the tag or tags between them, when the italics tag is the descendant of the copy ID, the text is large and red. 
To use the universal selector: 1. | #copy * i {...}
Type a selector in one of the formats explained above (descendant, child, or adjacent sibling), substituting an asterisk (*) for any of the HTML selectors that you do not want to exactly define (Code 2.16). This selector is then a wildcard that can be any HTML tag.
Code 2.16. Any <i> tag nested in any tag nested within the copy ID will receive the style.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Defining Tags in Context | Universal</title> <style type="text/css" media="all"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; background-color: #fff; color: #000000; margin: 8px; } #copy * i { color: red; font-size: 2em; display: block; } </style> </head> <body> <div ><b><i>'Curiouser and curiouser!'</i></b></div> <div ><span > <i>'Curiouser and curiouser!'</i> </span></div> <div ><i>'Curiouser and curiouser!' </i></div> </body></html>
|
| 2. | <div ><b><i>...</i></b></div>
HTML that is structured using the format provided in Step 1 will be assigned the style, allowing for any HTML tag to take the place of the asterisk.
|
|
