Pseudo-classes and Pseudo-elements: A First Look

Some things you want to style are not separate elements in your HTML. A link being hovered over, the first item in a list, the first letter of a paragraph. CSS handles these with two special kinds of selector.

Pseudo-classes: a state or position

A pseudo-class starts with one colon and describes a state or a position.

1
2
3
4
5
6
7
8
9

<style>
  a:hover { color: #d94a00; }
  li:first-child { font-weight: bold; }
</style>
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<a href="#">Hover over this link</a>

Pseudo-elements: a part of an element

A pseudo-element starts with two colons and styles a part of an element, or adds generated content.

1
2
3
4
5
6

<style>
  p::first-letter { font-size: 2.2em; color: #d94a00; }
  h2::after { content: " →"; color: #d94a00; }
</style>
<h2>Next chapter</h2>
<p>The first letter of this paragraph is larger.</p>

Quick comparison

Later in the course there are full chapters for both: start with Hover, Active and Visited and ::before and ::after.