SELECTORS - CSS: Professional Techniques for Modern Layout - page 62

div#main > div { border : 1px solid gray ;}

Figure 2-18: Faking child selection.

Okay, so how do we simulate that ef ect? Like this:

div#main div { border : 1px solid gray ;}
div#main * div { border : 0 ;}

h e second rule selects any div that descends from any element that descends from a div
with an id of main . In ef ect, it undoes the ef ect of the i rst rule. Both apply to div s that are
at most grandchildren of div#main , and both are setting the borders, so they're in conl ict.
h ey're also the same specii city, so the last one declared wins. h e div s of div#main ,
though, are only selected by the i rst of the two rules, so the borders stay in place.

64

h ere's one thing to keep very much in mind: h is “faked” child-selection technique really
only works well with non-inherited properties. With inherited properties you can create some
very unintended ef ects. As an example, suppose you wrote:

ol li { font-weight : bold ;}
ol * li { font-weight : normal ;}

Now, suppose that you have a situation where you want the unordered lists of a certain class
of ordered list to be boldfaced (see Figure 2-19):

ol.urgent ul { font-weight : bold ;}

Given this additional rule, the list items in those unordered lists will be … not boldfaced.
h at's because the ol * li rule shown previously directly applies to those list items. Its
directly assigned font-weight value of normal overrides the bold value that would ordinar-
ily be inherited from the ol.urgent li rule.