Common States (hover, active, focus, focus-visible)

How does a reader know that a link is under the pointer, that it is being pressed, or which field will receive the next key press? The browser tracks each of these conditions for every element, and CSS can style them. A selector part that matches an element only while it is in a certain condition is called a pseudo-class. It starts with a colon, as in a:hover, and it adds to the selector in front of it rather than replacing it.

This lesson uses one small settings menu for every example: four links and a search field. Each section adds one state to it.

<!DOCTYPE html>
<html>