technique confused with grouping, where you simultaneously define a style for
several selectors. If you want to group pand iso that all paragraphs and all
italics are underlined, use commas to create a group style, like this:<style>
p,i {color: blue;}
</style>By adding that one little comma between the pand iselectors, you create a
grouping, and both elements are given a border bottom, no matter in what
context they appear, as shown in Figure 14-5:You can use contextual selectors in a variety of practical ways. For example,
you might want to make all text within either a boldor strongelement a light
red to draw attention to it. That’s fine. You can do it with a grouping, like this:b, strong {color: coral;}However, what if you want to specify an additional rule that states that if
something needs to be emphasized (with the strongselector) withinsome
boldface (b) text (which is coral), the strong text must turn black? This way
the viewer can actually see the strong emphasis. Unless you create this style,
both the band strongare indistinguishable — they’ll both be coral.To do this, you create a contextual selector that states that any strongthat’s
a child of (contained within) a belement must be colored black:b strong {color: black;}Here’s the complete code that produces the desired result shown in
Figure 14-6:Figure 14-5:
Here a
grouping
causes a
border
bottom to
appear
beneath all
italics and
paragraphs.