Events

CSS Events Summary

CSS pseudo-classes let you style an element when it is in a certain state. For example, a link can look different when it is hovered, a button can look different while it is being clicked, and an input can look different when it is selected.

a:hover {
	color: blue;
}
button:active {
	background: black;
}
input:focus {
	border-color: blue;
}

What A Pseudo-Class Does

A pseudo-class is added to a selector with a colon. It tells CSS to apply styles only when something specific is happening to the element.

selector:pseudo-class {
	property: value;
}

This is useful because many parts of a website need to react to the user without using JavaScript.

Hover

:hover applies when the mouse is over an element. It is often used on links, buttons, cards, and menu items.

a:hover {
	color: red;
}

Hover is common enough that it has its own page below this one.

Active

:active applies while an element is being clicked or pressed. It is often used to make buttons feel responsive.

button:active {
	background: black;
	color: white;
}

Focus

:focus applies when an input, button, link, or other focusable element is selected. This can happen when someone clicks into a field or moves through the page with the keyboard.

input:focus {
	border-color: blue;
}

Focus styles are important because they help people see where they are on the page.

Visited

:visited applies to links the browser knows the user has already visited. It is most often used to change link color.

a:visited {
	color: purple;
}

Checked

:checked applies to a checkbox or radio button when it is selected.

input:checked {
	outline: 2px solid blue;
}

This can also be used with nearby labels or boxes to make simple interactive controls.

Events And Transitions

Pseudo-classes change styles when the element changes state. Transitions control how smoothly that change happens. For example, hover can change a button color instantly, while transition can make the color fade from one color to another.

Transitions have their own page below this one because they are a separate CSS tool.