HTML and CSS Reference
In-Depth Information
5. .hero h2 {
6. font-size: 36px;
7. }
8. .hero p {
9. font-size: 24px;
10. }
11. Lastly, we have one small issue to fix on our home page. Previously we gave all of
our anchor elements a light gray color value when a user hovers over them. This
works great, except for within the three teasers on our home page where the anchor
element wraps both <h3> and <h5> elements. Because the <h3> and <h5> ele-
ments have their own color definition, they are not affected by the :hover
pseudo-class styles from before.
Fortunately we can fix this, although it's going to require a fairly complicated se-
lector. We'll begin by adding a class attribute value of teaser to all three
columns on the home page. We'll use this class as a qualifying selector shortly.
Click here to view code image
1. <section class="grid">
2.
3. <!-- Speakers -->
4.
5. <section class=" teaser col-1-3">
6. <a href="speakers.html">
7. <h5>Speakers</h5>
8. <h3>World-Class Speakers</h3>
9. </a>
10. <p>Joining us from all around the world are over twenty
fantastic speakers, here to share their stories.</p>
11. </section>
12.
13. ...
14.
15. </section>
With a qualifying class in place, we're ready to do some CSS heavy lifting and
create a fairly complex selector. We'll begin our selector with the teaser class,
as we only want to target elements within an element with the class of teaser .
From there we want to apply styles to elements that reside within anchor elements
that are being hovered over; thus we'll add the a type selector along with the
:hover pseudo-class. Lastly, we'll add the h3 type selector to select the actual
<h3> elements we wish to apply styles to.
Altogether, our selector and styles for these <h3> elements will look like this:
Search WWH ::




Custom Search