Question

Is it possible to apply one CSS declaration to more than one HTML element using nth-child?

For example I have a nested list and I want to apply the background colour red to list item 1, green to list items 2 to 4, blue to list items 5 to 8 and yellow to list item 9 using only 4 CSS declaration.

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
      <ul>
         <li><a href="#">Our Team</a></li>
         <li><a href="#">Our Goal</a></li>
      </ul>
  </li>
  <li><a href="#">Media</a>
      <ul>
         <li><a href="#">NLC in the News</a></li>
         <li><a href="#">Photos</a></li>
         <li><a href="#">Videos</a></li>
      </ul>
  </li>
  <li><a href="#">Events</a></li>
</ul>

Answer 1

I see 4 outer li elements here (Home, About, Media, Events). If these correspond to the 4 CSS declarations (actually rules) you’re referring to, then :nth-child() is only part of the solution:

#nav > li:nth-child(1) {
    background-color: red;
}

#nav > li:nth-child(2), #nav > li:nth-child(2) li {
    background-color: green;
}

#nav > li:nth-child(3), #nav > li:nth-child(3) li {
    background-color: blue;
}

#nav > li:nth-child(4) {
    background-color: yellow;
}

If you were looking for a formula to apply to the nth outer li and all its sub lis, then this would be it:

/* Of course, substitute n with the actual number */
#nav > li:nth-child(n), #nav > li:nth-child(n) li