INF-250: Web Design and Development — Pseudo Classes and Display Settings

Pseudo Classes

In CSS, we've learned how to select an element by using the element's name, its class, or ID.

But what if we want to target an element only part of the time, or target an element only under certain conditions? That's where pseudo-classes come in.

:hover
:active
:visited
:first-child

a {
	color: blue;
}

a:hover {
	color: red;
}

.nav-link:visited {
	color: purple;
}

Try it in CodPen.

Display Settings

CodePen Challenge #1

CodePen Challenge #2

CodePen Challenge #3

CodePen Challenge #4

CodePen Challenge #5