@cluberr

Как выбрать четные/нечетные дочерние элементы родителя только с определенным классом?

Каким селектором можно выбрать четные/нечетные дочерние элементы для .parent с классом .child ?
<div class="parent">
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div class="child">block</div>
  <div>block</div>
  <div class="child">block</div>
  <div>block</div>
  <div class="child">block</div>
</div>
  • Вопрос задан
  • 1857 просмотров
Решения вопроса 1
@ned4ded
Верстка, Фронтенд
Ответ: Невозможно реализовать такую выборку через обычный css селектор.

Каждый элемент в доме входит в "список сиблингов" (яхз как нормально перевести list of siblings), т.е. список таких нод, которые являются прямыми потомками для одной родительской ноды.

Все структурные псевдо-классы (:nth-child, :nth-of-type, etc) работают именно со списком таких нод, т.е. выставляя любом селектору псевдокласс ":nth-child()" вы выбираете только те элементы, для позиции которых в списке сиблингов верна заданная в nth-child формула.

На примере: .child:nth-child(1) { color: red; } не окрасит ни один элемент, по той причине, что ни один .child элемент не является первым в списке сбилнгов; однако, .child:nth-child(4) { color: red; } окрасит самый первый элемент с классом .child в приведенном ТС примере, т.к. он является 4 элементов в списке своих сиблингов.

Вывод: без js вы не сможете сделать такую выборку. Я вижу два решения: 1) вы окрашиваете на стороне клиента эти элементы через js, 2) вы рассчитываете на стороне бека, какой из элементов является четным и добавляете ему класс .child--view--even, который в стилях будет окрашивать ваш элемент в красный цвет.

Для фронта:
(() => {
	const elements = document.getElementsByClassName('child');
  
  const rec = (arr) => {
    if(!arr.length) return;
    
    const [even, odd, ...rest] = arr;
    
    even.setAttribute('style', 'color: red');
    
    return rec(rest);
  }
  
  rec(elements);
  
  return;
})();


ps если вы будете использовать мой пример в чистом виде, то лучше его отбабелить
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
jkd
@jkd
Так не прокатит? Правда не совсем CSS ^-)

$(function(){
$("div.parent div.child:odd").css("background-color", "#F00");
$("div.parent div.child:even").css("background-color", "#00F");

});

https://jsfiddle.net/j58sk0h7/24/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы