Списки и nth-child

Question

У меня есть вопрос, связанный с списками и использованием nth-child.

У меня есть два списка, на которые настроен селектор, и пытаюсь получить доступ к отдельным элементам.

В моем примере Fiddle я ожидал, что пятый элемент будет желтым, а не голубым.

Когда селектор нацелен на несколько списков, они не объединены в один список?

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/

Спасибо! С.

Answer 1

Ваша скрипка работает, как вы хотите. Этот вопрос:

Когда селектор нацелен на несколько списков, не объединены ли они в один список?

Ответ НЕТ. Два списка независимы, и если вы нацеливаете ul li, вы выбираете все li всего ul, но не комбинируете.

Для того, чтобы объединить более одного ul вам нужно удалить динамически конец каждого ul кроме последнего, и начало каждого ul кроме первого.

EDIT

Я сделал скрипку с куском JavaScript, который поможет вам объединить все ul

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

Код:

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

Answer 2

НЕТ они не объединены в один .. ul li:nth-child(5) выбирает 5-li ребенка определенного ul, а не объединить все ul, а затем выбирает 5-ребенка.

Вы можете объединить ul, а затем применить нужный стиль к 5-му li комбинированного ul ИСПОЛЬЗОВАНИЕ JavaScript. Вот скрипку, как я сделал это с помощью чистого JS - https://jsfiddle.net/1q66hwgg/6/

Код -

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

Answer 3

Я был через CSS select first element with a certain class ответ и nth-of-child и нашел это ..пожалуйста, проверьте

Demo

Как Маркос и Paulie сказал, два списка будет независим и оба или все (если вы используете больше), вы должны применять различные другие правила CSS, но если вы хотите идти через один из родителей, тогда вы можете пойти со своей скрипкой (помощь с Paulie_D и Lea). Вы можете легко пойти с ними с помощью внешнего div/ul

Answer 4

Быстрого решения JQuery, хотя это очень широких как селектор, и было бы целесообразно ограничить переключатель дальше.

$('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>

Answer 5

Как некоторые другие ответы сказал; Нет, списки не объединены в один, при использовании nth-child.

Вы хотите во втором ul первый li быть желтым, используя только CSS, вы можете использовать это:

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