Wednesday 13th of December 2017 08:02:05 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U

Figure 10-5

Figure 10-5. Selecting adjacent elements

If you wanted to make any element immediately following anH2 silver, then the universal selector comes intoplay:

H2 + * {color: silver;}

The fact that user agents ignore text between elements can actuallybe used to your advantage in many circumstances. Take, for example, adocument design in which you want STRONG text to | V | W | X | Y | Z

Index: J

Netscape Navigator preferences: 11.2.1. Making Styles Work
reapplying styles: 11.2.10. Disappearing Styles
JavaScript Style Sheets (JSSS): 11.2.1. Making Styles Work
justifying text: Aligning text
11.1.3. Case 3: Putting a Magazine Article Online

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

universal selector. This will yield the result shown in Figure 10-12:

Now let's say we want to apply styles to elements that are partof a first child; for example, all emphasized text within afirst-child paragraph should be italicized:

Of course, this will match any first-child paragraph, no matter itsparent element. Suppose instead we want a rule that applies only toparagraphs that are the first children of DIVelements. In that case, we need to use the child selector:

Only the first and third paragraphs match the rule because they arechildren of BODY. The second paragraph is a childof DIV, and therefore a grandchild ofBODY, so it does not match the rule.

Child selectors must have at least two or more selectors separated bythe > symbol. It is possible to make a childselector part of a contextual selector as well:

DIV OL>LI EM {color: purple;}
width. In order to avoid this problem, make surethat you declare a width for your floated elements. Otherwise, youcould get something like Figure 7-66.

Figure 7-66

Figure 7-66. Floated text without an explicit width Backgrounds and floats

There are many other interesting effectsassociated with floating elements. Take the example of a shortdocument, composed of no more than a few paragraphs and