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: 
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:

```css
#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 `li`s, then this would be it:

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

```
With Subgroups (like you have)
------------------------------

Well, in your case it is easier since they are subgrouped. [This works](http://jsfiddle.net/9Y6nS/).

```css
#nav > li:nth-child(1) {background-color: red;}
#nav > li:nth-child(2), 
#nav > li:nth-child(2) > ul > li {background-color: green;}
#nav > li:nth-child(3), 
#nav > li:nth-child(3) > ul > li {background-color: blue;}
#nav > li:nth-child(4) {background-color: yellow;}

```

For a Single List (like others might have)
------------------------------------------

*It would also be possible if it were all one list*, but you need to allow the cascade to help. [See this example](http://jsfiddle.net/9Y6nS/4/):

**HTML**

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

```

**CSS**

```css
#nav > li:nth-child(1) {background-color: red;} 
#nav > li:nth-child(n+2) {background-color: green;} 
#nav > li:nth-child(n+5) {background-color: blue;} 
#nav > li:nth-child(n+9) {background-color: yellow;}  

```