Position

Position selectors are more specific. They look for elements inside other elements. We separate nested elements with a space.

p em {
  color: yellow;
}

Selects all em elements that are within a paragraph:

<p>This is <em>important.</em></p> <!-- This would be selected -->

<h1>This is <em>important.</em></h1> <!-- This would not! -->

ul li a strong{
  color: purple;
}

So what does that CSS mean? Fill in the blank:

"Find a ____inside a ___ inside a __ in an ___ list"

<ul>
  <li><a href="programs.html">Our <strong>program</strong></a></li>
</ul>

Pseudo-classess

Pseudo-classes can style elements based on their current state.

Syntax:

selector:pseudo-class {
  property: value;
}