Как выбрать n-й (каждый) подтип под неупорядоченным списком?

Question

.left li i { border: 1px solid red; } 
 
.left li:nth-child(3) > i{ border: 1px solid black; }

<div class="left"> 
 
    <ul> 
 
    <li>some data<i>icon</i></li> 
 
    <li>some data<i>icon</i></li> 
 
    <li>some data<i>icon</i></li> 
 
    </ul> 
 
</div>

Теперь я хочу, чтобы применить конкретные правила для каждого я пункта, как, например, цвет границы, но мой селектор не будет работать. Первый селектор работает нормально, но второй нет, я не могу нацелить, например, первый элемент, а затем применить другой цвет границы, а затем применить другой цвет границы для второго, третьего или четвертого элемента или в этом случае тэг <i>.

Answer 1

см jsfiddle: http://jsfiddle.net/zj9v81t7/21/

<ul> 
<li>some data<i>icon</i></li> 
<li>some data<i>icon</i></li> 
<li>some data<i>icon</i></li> 
</ul> 
css 
    ul li i { border: 1px solid red; } 
    ul li:nth-child(2) > i{ border: 1px solid blue; } 
ul li:nth-child(3) > i{ border: 1px solid black; }