css - Lists and nth-child

I have a question related to lists and the use of nth-child.

I have two lists targetted by a selector, and am trying to access individual elements.

In my Fiddle exemple, I expected the 5th item to be yellow not cyan.

When a selector targets multiple lists, are they not combined into one list?

    ul li:nth-child(5){
            background-color: yellow;

    }   

---

    

        
1
        
2
        
3
        
4


    

    

        
a
        
b
    
   

https://jsfiddle.net/1q66hwgg/

Thanks!
S.

Answer

Your fiddle is working like you want. This question:

When a selector targets multiple lists, are they not combined into one list?

The answer is NO. Two lists are independent and if you target ul li you are selecting all li of all ul but not combined.

In order to combine more than one ul you need to remove dinamically the end of every ul except the last, and the start of every ul except the first.

I made a fiddle with a piece of javascript that helps you to combine all ul

https://jsfiddle.net/1q66hwgg/2/

The code:

var arrLi = [];
$('ul').each(function() {
    $(this).find('li').each(function() {
        arrLi.push($(this).html());
    });
    $(this).remove();
});
var ul = $('
').attr({id:"ulid"}).appendTo("#wrap");

for(var i in arrLi) {
    var li =$('
'+arrLi[i]+'
');
    li.appendTo(ul);
}