HTML and CSS Reference
In-Depth Information
That said, this lack of support for some advanced selectors can be corrected using a free script called Selectivizr,
found at
www.selectivizr.com
. When completed, the Cool Shoes & Socks page will only use selectors with full
browser support. Visit the Selectivizr website for installation instructions should you choose to use advanced se-
lectors now or in the future.
1.
In styles.css, find the
h1
rule set:
h1 {
font-weight: bold;
}
2.
Modify the rule set to include other title elements, like so:
h1, h2, h3, h4 {
font-weight: bold;
}
3.
Save styles.css.
By separating each selector with a comma, you can apply the same styles to multiple elements.
Combinators
Combinators allow you to apply styles to elements based on their relationship with other elements. All the selectors
you've learned up to now can be used with combinators to make even more specific selectors.
Descendant Combinators
A descendant selector describes the descendant of an element. Descendant combinators are great for styling elements
that exist inside of other elements.
1.
In styles.css, add the following:
blockquote p {
font-style: italic;
}
2.
Save styles.css.
In this example, only
<p>
elements that are descendants of
<blockquote>
will be made italic. By using a des-
cendant combinator, you can be more specific about which elements you want to select.
Child Combinators
Sometimes, a descendant combinator isn't quite strict enough for your purposes. Follow these steps to use a child
combinator:
1.
In styles.css, add the following:
aside > h3 {
font-weight: bold;
}
2.
Save styles.css.
