CODEWITHSUNDEEP
css
JMGECH
JMGECH

Reputation: 653

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

    <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.

Upvotes: 0

Views: 902

Answers (5)

Leo the lion
Leo the lion

Reputation: 3065

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

Upvotes: 0

razemauze
razemauze

Reputation: 2676

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 2031

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

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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

Upvotes: 1

Related Questions