HTML and CSS Reference
In-Depth Information
Figure 3-21
Examples of contextual selectors
*
p
h1, h2, span
body
body
body
h1
h2
p
p
h2
p
h1
h2
p
p
h2
p
h1
h2
p
p
h2
p
p
b
span
b
b
span
b
b
span
b
b
b
b
b
p b
p > b
h2 + p
body
body
body
h1
h2
p
p
h2
p
h1
h2
p
p
h2
p
h1
h2
p
p
h2
p
p
b
span
b
b
span
b
b
span
b
b
b
b
b
Using Contextual Selectors
• To apply a style to all elements in a document, use the * selector.
• To apply a style to a single element, use the
e
selector, where
e
is the name of the
element.
• To apply a selector to a descendant element,
f
, use the
e f
selector, where
e
is the
name of the parent element and
f
is an element nested within the parent.
• To apply a selector to a child element,
f
, use the
e > f
selector, where
e
is the name
of a parent element and
f
is an element that is a direct child of the parent.
• To apply a selector to a sibling element, use the
e
+
f
selector, where
e
and
f
are
siblings and
f
immediately follows
e
in the document tree.
• To apply a selector to any sibling element, use the
e
~
f
selector, where
e
and
f
are
siblings.
Now that you've seen how to create contextual selectors, you can fi x the style rule
you created earlier. Rather than applying white text and a sky blue background to every
h1
heading, you'll apply those properties only to
h1
headings that are descendants of the
section
element. The style rule thus becomes
section h1 {
background-color: rgb(125, 186, 240);
color: white;
}
with the
section h1
selector replacing simply
h1
. You'll revise the style sheet
accordingly.
To revise the style sheet:
◗
1.
Return to the
sa_styles.css
file in your text editor.
◗
2.
Change the selector for the
h1
heading rule to
section h1
(see Figure 3-22).
