There is also nth-of-type. Add nth-of-type(2) to the primary-nav selector in our CSS:
.primary-nav > li:nth-of-type(2) > a { background-color: deeppink; color: #fff;}
The difference between nth-of-type and nth-child is that nth-of-type is pre-qualified to only look for an element that it's attached to. For example, in our case we've attached nth-of-type to an li, so it only matches li tags:
.primary-nav > li:nth-of-type(2) > a { background-color: deeppink; color: #fff;}
Let's see this in action. Let's add back our h2 tag:
<nav class="grouping"> <figure> <img src="images/sharky.png" alt="sharky"> </figure> <ul class="primary-nav"> <h2>not valid html</h2> <li><a href="#">Home</a></li> <li><a href="#">Movies</a></li> ...
