How to select the 2nd div in the 3rd and 4th li

Question

http://codepen.io/leongaban/pen/migpC

So I want to select the 3rd and 4th Box titles in my codepen layout above and style them differently. And I want to accomplish this using pseudo selectors like nth-child and not with a specific class, id or jquery.

This is what I ended up with, and I know why it's not working, because it's trying to find the nth-child of the div, instead of the nth-child of the .btn_title class

div.btn_title:nth-child(3) {
    border: 4px solid #333;
    color: #b1b3b3;
}

So my question is, how would you target the 3rd and 4th 2nd div in my list?

HTML

<ul>
<li>
  <div id="box1" class="web_btn"></div>
  <div class="btn_title">Box 1</div>
</li>
<li>
  <div id="box2" class="web_btn"></div>
  <div class="btn_title">Box 2</div>
</li>
<li>
  <div id="box3" class="web_btn"></div>
  <div class="btn_title">Box 3</div>
</li>
<li>
  <div id="box4" class="web_btn"></div>
  <div class="btn_title">Box 4</div>
</li>

Answer 1

If I understood correctly: http://codepen.io/anon/pen/khDgE

Try this:

li:nth-child(2) .btn_title, li:nth-child(3) .btn_title {
   border: 4px solid #333;
   color: #b1b3b3;
}