Specific behaviour of the first li element in ul and div

Question

I have following problem: in a div there are for example three ul elements. Each of those ul elements contains one or more li elements. What I want, is to add a specific attribute to the very first li which is in the first ul , but the way other li won't have the same behaviour.

<div class="class1">
    <ul>
      <li>          
        <div class="type">
            some text
        </div>
        <p>some more text</p>       
      </li> 
      <li>          
        <div class="type">
            text2
        </div>
            <p>more text 2</p>          
      </li> 
    </ul>
    <ul>
      <li>   
        <div class="type">
            some new text
        </div>
        <p>more some new text</p>       
       </li>    
       <li>         
        <div class="type">
            text 3
        </div>
            <p>more text 3</p>      
       </li>    
    </ul>
</div>

And my CSS looks following:

.class1 ul:first-child li {
    border-top: #000000 1px solid;
}

But this doesn't work the way I wish and since I'm pretty new to CSS, I have no idea what can I do without using JS. Does anyone have any advice for me please? :)

Answer 1

Just select the first li as well with :first-child :

.class1 ul:first-child li:first-child

JSFiddle Demo