Divs and Contextual Selectors

There are two ways to target those particular paragraphs, the first of which will be familiar
from Chapter 2. Now that divs have been introduced, however, it is no longer the best way.

The Bad Way
 
Knowing what you already know, it’s tempting to create a new class for turning the paragraphs
red, as follows:
/* Make text red */
.highlight {
color: #F00;
}
Then in the (X)HTML, the identifiers for our highlight class would need to be added like
so:
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p class="highlight">I'm in a box!</p>
</div>
<div class="box">
<p class="highlight">I'm also in a box!</p>
</div>
</div>
The paragraphs will certainly be red now, but it’s taken extra markup for each opening
paragraph tag to accomplish the effect. This extra markup would be required for every paragraph
within the div, which is only serving to bloat the markup.

The Good Way
 
This time, the identifiers are not required. In fact, no changes need be made to the (X)HTML at
all. Everything can be controlled within the style sheet. Time to put the paragraphs into context
with the following combination:
/* Make text red only for paragraphs within the box class */
.box p {
color: #F00;
}
Using this approach, no extra markup is required. Everything needed to take complete
control of the paragraphs is already in place. The contextual selector is constructed to show
that the rule will only have an effect when the last selector (p) is a direct descendent (the child)
of the first selector (.box). This is a strong example of how major changes to whole sections can
be achieved simply by working with what you already have.
Another contextual selector could then be used to control paragraphs in the parent
element (the container div).
/* Make text gray only for paragraphs within the container */
#container p {
color: #333;
}
Now paragraphs inside the container will be rendered dark gray, unless contained by .box, in
which case they will be red.

Taking the Context Even Further
 
Let’s now assume that you are using the box class all over the site. Sometimes the box classes
are children of the container div, and sometimes they have a different parent. What if you only
want the paragraph text to appear bold when the box class is inside the container? This can be
achieved without extra markup also. Note that, outside of the container div, a new box div has
been added, which is not parented by anything:
<div id="container">
Content
<div class="box">
<p>I'm in a box!</p>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
As for the amazing CSS, the contextual selector consists of three selectors, putting the
paragraphs into a more specific context.
/* Make text bold only for paragraphs within the box class AND within the ➥
container */
#container .box p {
font-weight:bold;
}
This contextual selector is very powerful. The first thing to note is that the markup is very
clean. Yes, division elements exist to separate the content, but no identifiers are required for
any base elements. The effect of the contextual selector is threefold: