CSS Pseudo-class

A colon, not a class

A pseudo-class is a selector that matches a state or a position. You write one colon and a name: :hover, :focus, :first-child. The HTML does not gain an extra class. The browser already knows the pointer is over the link, the input has the caret, or the item is the first child of its parent.

Attach the pseudo-class to a normal selector. a:hover is “a link, while hovered.”li:first-child is “a list item that is the first child.” No space before the colon.

:hover

Hover is the lightest interaction cue. Raise contrast, change the background, or underline a link. Keep the change small enough that the control still looks like the same button.

<style>
  body {
    font-family: Georgia, serif;
    margin: 1.25rem;
    background: #f0f9ff;
    color: #0c4a6e;
  }
  a.book {
    display: inline-block;
    background: #0284c7;
    color: #fff;
    text-decoration: none;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
  }
  a.book:hover {
    background: #0d9488;
  }
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p><a class="book" href="#">Book a desk</a></p>

:focus

Focus is how keyboard users know where they are. Do not set outline: none unless you draw a replacement that is at least as clear. A sky ring around the field is enough.

<style>
  body {
    font-family: Georgia, serif;
    margin: 1.25rem;
    background: #f0f9ff;
    color: #0c4a6e;
  }
  label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
  }
  input {
    font: inherit;
    padding: 0.45rem 0.65rem;
    border: 1px solid #7dd3fc;
    border-radius: 0.45rem;
    width: 16rem;
  }
  input:focus {
    outline: 3px solid #0d9488;
    outline-offset: 2px;
    border-color: #0d9488;
  }
</style>
<h1>Harbor studio</h1>
<label for="guest">Name for the booking</label>
<input id="guest" type="text" value="Ada">

Click the field or press Tab in the live preview. The teal outline is the focus style. Keep it. The outline chapter covers the same idea for every control, not only inputs.

:first-child and :nth-child

These look at position among siblings, not at a class you typed. :first-child is the first child of the parent. :nth-child(odd) and :nth-child(even) stripe a list or a table. :nth-child(3) is only the third child.

<style>
  body {
    font-family: Georgia, serif;
    margin: 1.25rem;
    background: #f0f9ff;
    color: #0c4a6e;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #7dd3fc;
    border-radius: 0.75rem;
    overflow: hidden;
  }
  li {
    padding: 0.55rem 0.85rem;
    background: #fff;
  }
  li:nth-child(even) {
    background: #e0f2fe;
  }
  li:first-child {
    font-weight: 700;
    background: #0c4a6e;
    color: #fff;
  }
</style>
<h1>Harbor studio</h1>
<ul>
  <li>Hours this week</li>
  <li>Tuesday 8–16</li>
  <li>Wednesday 8–16</li>
  <li>Thursday 8–14</li>
  <li>Friday 8–16</li>
</ul>

:not()

:not() subtracts a match. Style every card except the one with a class, or every link except the current page. Put a simple selector inside the parentheses while you learn: a class, a tag, or another pseudo-class.

<style>
  body {
    font-family: Georgia, serif;
    margin: 1.25rem;
    background: #f0f9ff;
    color: #0c4a6e;
  }
  .card {
    padding: 0.75rem 0.9rem;
    border-radius: 0.65rem;
    margin-bottom: 0.5rem;
  }
  .card:not(.sold) {
    background: #fff;
    border: 1px solid #7dd3fc;
  }
  .card.sold {
    background: #e2e8f0;
    color: #64748b;
  }
</style>
<h1>Harbor studio</h1>
<div class="card">Tide chart — in stock</div>
<div class="card sold">March print — sold out</div>
<div class="card">Harbor Lane map — in stock</div>

The border and white fill apply to cards that are not .sold. The sold row uses its own rule. You did not have to invent a .available class for the other two.

What to do next

Pseudo-classes pick states that already exist. The next chapter, pseudo-elements, inserts extra boxes with ::before and ::after — two colons, and a content property.