Chapter 11

Hover and Pseudo Classes

Contents

11.1 Link Styling...................... 116

11.2 Text Styling...................... 117

11.3 First Child...................... 118

11.4 Hover and Focus................... 119

11.5 Transitions and Animations............ 120

11.5.1 Transitions...................... 121

11.5.2 Animation....................... 122

11.5.3 Transition Attributes................. 122

11.5.4 Animating Several Properties Differently...... 122

11.6 Swapping Out an Image.............. 123

11.7 For Further Study.................. 124

In this chapter we will talk about pseudo classes, pseudo elements, and
animated transitions.

We have used explicit HTML markup to apply styling to the elements of
our webpages. We can control the background color, font, padding, border,
margin, and many other aspects of the style. We have used classes to help
us target our stylings.

But think about links. They do something unusual. When we first view a
link, it is colored in such a way that we can tell we have never been there.
(Or, at least, it is not in our history.) But after we visit it, the link changes
color. And yet the HTML of the webpage has not changed.

115