Apply class when it is second list item

Question

I have the following HTML code:

<ul class="grid_1330 margin-auto">
  <li class="homeListagemLi">
    <div class="homeListagemDiv">
       <ul>
         <li><img src="./imagens/pessoa.jpg" height="220" width="220" /></li>
         <li><span>teste1</span></li>
         <li><span>teste2</span></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
        </ul>
     </div>
   </li>
</ul>

So is my CSS:

.homeListagemDiv>ul>li>img{width: 220px;height: 220px;}
.homeListagemDiv>ul>li>span{
    color: #00aeef;
    font-size: 15px;
    font-family: "open_sansbold";<sp
}

I want when, the span be the second, there inside the LI, it accepts another format, different from the one I put in the CSS. Of course, I could create a class and put in the li, but there is another way?

Answer 1

If I understand correctly what you want that element to be

   <ul>
     <li><span>teste1</span></li>
     <li><span class="esse">teste2</span></li>
   </ul>

And not like this

   <ul>
     <li><span>teste1</span><span class="esse">teste1</span></li>
     <li><span>teste2</span></li>
    </ul>

You can’t do just with css, in case the second example would be like this:

ul > li > span:nth-child(2) { color: red }

What you can do is take the second li, if the span is always there

ul > li:nth-child(2) > span { color: red }