Выберите элемент с нечетным числом только в последнем положении, а не только в дочернем объекте

Question

Мне нужно настроить таргетинг на последний элемент, если он нечетный.

Допустим, у меня есть 3 элемента. Я хочу нацелить третий элемент только потому, что его последний и нечетный. Но если у меня есть 1 элемент, я не хочу, чтобы это правило применялось, даже если это действительно нечетное число.

1 2 3(target) 

1 2 3 4 5(target) 

1 2(don't target) 

1(don't target) 

Как я мог это сделать?

Так что я хочу комбинировать :nth-child(odd) и :not(:only-child) и только в том случае, если это применимо.

Answer 1

Если сделать магии, вы можете использовать не так, как селектор

target:not(:first-child):last-child { /*some magic css*/ } 

Answer 2

Я думаю, что вы имеете в виду вы хотите, чтобы выбрать элемент, если он

• нечетное
• последний ребенок
• не единственный ребенок

Это довольно просто, чтобы объединить все это:

:nth-child(odd):last-child:not(:only-child) { 
    color: blue; // or whatever 
} 

Answer 3

Есть несколько способов сделать это, с разной степенью специфичности в случае это важно для вас.

Один из них, как уже было предложено lonesomeday, со специфичностью (0, 3, 0) (3 псевдо-классы, с :not(:only-child) имеют одинаковую специфичные для :only-child):

:nth-child(odd):last-child:not(:only-child) 

Другой, со специфичностью (0, 2, 0):

:nth-child(2n+3):last-child 

выражение 2n + 3 начинается соответствие с 3-го ребенка и далее, устраняя необходимость в :not(:only-child). (Для сравнения, ключевое слово «нечетное» эквивалентно 2n + 1.)