Using Contextual Selectors

You can use contextual selectors to specify the style of elements that appear within other elements. For example, you might want an element to appear one way when it's by itself, but another way when enclosed in another element. Here's how that might look. In this case, I'm specifying that when used inside <P> elements, the <U> element must underline its enclosed text:

Listing ch09_12.css

 TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10}  P U {text-decoration: underline}  

Now I can use the <U> element inside a <P> element:

Listing ch09_13.xml

 <?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="ch09_12.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>  From my grandfather, <U>Verus</U>, I learned good morals  and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT> 

You can see the results in Figure 9-7, where you can see the <U> tag doing its job.

Figure 9-7. Using contextual selectors.