Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Part I: The BasicsIE 6 does not support direct child selectors natively; see this book’s website at www.wrox.com/go/beginning_css2e for compatibility help.Figure 3-20In Figure 3-20 you see that the greater than sign (or right angle bracket), >, is used in the style sheetto select an element in the HTML document. In Figure 3-20, you see a parent/child relationship inthe direct child selector, p > span.inline-code. In order to apply the declaration font-family:monospace;, the element with the class name inline-code, must be the child of a element.Direct child selectors are selectors that depend on the context that an element appears in a document.The context in this case is a parent/child relationship. Like descendant selectors, a direct child selectorchain can have as many elements as you like; an example of this is shown in Figure 3-21.Figure 3-21In Figure 3-21, you see two parent/child relationships represented in one selector. The element is adirect child of the with an id name of body and the with a class name of inline-code isa direct child of the element.You can also mix selectors, if you have need of it. Figure 3-22 shows mixing descendant selectors withdirect child selectors.Figure 3-22In fact, you can mix and match selectors in pretty much any way imaginable — direct child selectorswith descendant selectors, with universal selectors. CSS is very flexible in this regard, provided browsersupport for the selector exists.76