Lesson 5 / 28

Pseudo-classes & Pseudo-elements

Style states and sub-parts of an element without extra markup.

Pseudo-classes

A pseudo-class (single colon :) targets a special state or position: :hover, :focus, :first-child, :nth-child(2), :last-of-type.

Pseudo-elements

A pseudo-element (double colon ::) targets a sub-part of an element: ::before, ::after, ::first-line, ::placeholder.

Hover and generated content

::before needs content to render, even if empty.

button:hover {
  background-color: #1e40af;
}

.required::after {
  content: " *";
  color: red;
}

One colon vs two

State/position → single colon (:hover). Sub-part/generated content → double colon (::before). Browsers still accept :before for legacy reasons, but write ::before.