Introduction to CSS (Cascading Style Sheets) with JavaScript - JavaScript by Example - page 569

EXAMPLE 14.19 ( CONTINUED )

<p>

2 <span class="highlight"> This is a text. </span> Highlighting

text is a nice idea.<br>Whenever you apply a span style
to this paragraph, you'll see what happens.

3 <span class="highlight"> This is the highlighted text. </span>

</p>
</body>
</html>

EXPLANATION
1

This is a dependent class selector rule. The class highlight can only be applied to
<span> </span> tags.

2 The class attribute is assigned the name of a class called “highlight”. The class will

be in effect for only the portion of text between the <span></span> tags. The back-
ground color of the text is changed to yellow as shown in Figure 14.20.

3 The text between the <span></span> tags will be highlighted based on the class

rule.

Figure 14.20 Highlighting text between <span></span> tags using the class attribute.

14.9.3 Inheritance and Contextual Selectors

Virtually all selectors that are nested within selectors will inherit the property values
assigned to the outer selector unless otherwise modified. For example, a color defined
for the “body” will also be applied to text in a paragraph. Contextual selectors have an
inheritance basis. For example, if a <b> tag is nested within a <p> tag, then the <b> tag
takes on the characteristics assigned to its parent. If the <p> is green, then the bold text
will also be green. If a bullet list <ul> has <li> tags nested within it, the bullets take on
the characteristics of its parent. If the ul element is red, then all the bullets and the
accompanying text will be red.