liveBook · Manning

Pseudo-class

As explained in Web Design Playground, Second Edition

A CSS pseudo-class is a selector condition that identifies an element in a particular state or structural condition.

A pseudo-class adds a condition to a CSS selector. Think of it as a little “when this happens” tag: the browser applies the rule only while that condition is true. The `:hover` pseudo-class is triggered when the mouse pointer is over an element. section 5.5

Highlight a link on hover

Attach `:hover` to the `a` selector to give links a temporary rollover style. While the pointer is over a link, it turns yellow and gains an underline; when the pointer leaves, its normal blue, unlined style returns. section 5.5

a:hover {
    color: #ffc200;
    text-decoration: underline;
}

This rule shows the pseudo-class syntax: write the element selector, add `:hover`, then declare the styles to use during the hover. section 5.5

How Web Design Playground, Second Edition covers it

How deep it goes
Defines `:hover` and explains its temporary browser behavior without covering other pseudo-classes.
Examples
Demonstrates social-media links changing color and gaining an underline on hover.
What you can do after
Apply it via CSS selectors to create a temporary hover style for links.
How it connects
Connects pseudo-classes with CSS selectors, `a` elements, color, and `text-decoration`.

Also explained in

Compare how 3 books explain pseudo-class →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.