Lists and nth-child

Question

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;
    }

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>

    </ul>

    <ul>
        <li>a</li>
        <li>b</li>
    </ul>

https://jsfiddle.net/1q66hwgg/

Thanks! S.

_When a selector targets multiple lists, are they not combined into one list?_ - no, there are not. — Vucko, Aug 14 '15 at 10:03
This second answer of this link is on point I think - http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — Paulie_D, Aug 14 '15 at 10:05

Rohit Kumar · Answer 1 · 2015-08-14T10:24:07.100

NO they aren't combined to one.. ul li:nth-child(5) selects the 5th li child of a particular ul and not combine all the ul and then selects the 5th child.

You can however combine the ul and then apply the desired style to the 5th li of the combined ul USING JavaScript. Here is the fiddle how I did this using pure JS - https://jsfiddle.net/1q66hwgg/6/

The code is -

var ul = document.getElementsByTagName('ul');
var li = [];
for(var i=0; i< ul.length; i++) {
    var item = ul[i].querySelectorAll('li');
    for(var j=0; j< item.length; j++) {
        li.push(item[j]);
    }
    if(li[4]) {
        li[4].style.backgroundColor = "yellow";
        break;
    }
}

Marcos Pérez Gude · Accepted Answer · 2015-08-14T10:10:44.357

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.

EDIT

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 = $('<ul></ul>').attr({id:"ulid"}).appendTo("#wrap");
for(var i in arrLi) {
    var li =$('<li>'+arrLi[i]+'</li>');
    li.appendTo(ul);
}

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

I have been through CSS select first element with a certain class answer and nth-of-child and found this..please check

Demo

As Marcos and Paulie said, two list will be independent and for both or all(if you use more) you have to apply different different CSS rules but if you want to go via one parent then you can go with my fiddle(help with Paulie_D and Lea). You can easily go with them with help of outer div/ul

edited May 23 '17 at 12:14

Community

1
1

answered Aug 14 '15 at 10:18

Leo the lion

3,164
2
22
40

can some one help me..how can i change this url in link which i gave in my answer..m fed up with this system of So..please edit the question and make it link..thanx – Leo the lion Aug 14 '15 at 10:19
well i have to add blank div to add that demo..is there any option to link jsfiddle without adding any code snippet? – Leo the lion Aug 14 '15 at 10:29
Well, i don't want to talk about meta.stackoverflow as damn bad exp with it..people there is like ready to give negative marks..meta is like ghost for me..nightmare... :( bt thanx for help – Leo the lion Aug 14 '15 at 10:32

Paulie_D · Answer 4 · 2015-08-14T11:00:10.047

0

Quick jQuery solution although it's very broad as a selector and it would be advisable to limit the selector further.

$('li').eq(4).css('backgroundColor', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>

</ul>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

edited Aug 14 '15 at 11:00

answered Aug 14 '15 at 10:34

Paulie_D

107,962
13
142
161

score 0 · Answer 5 · answered Aug 14 '15 at 11:03

As some of the other answers has told; No, the lists isn't combined into one, when using nth-child.

Do you want the first li in the second ul to be yellow, using only CSS, you can use this:

ul:nth-child(2) li:nth-child(1){
    background-color: yellow;
}

Lists and nth-child

5 Answers5

EDIT

Linked