Вопрос по приоритетам селекторов. Селекторы, часть 2 / Псевдокласс :nth-last-child [4/20]


#1

Здравствуйте!
Пожалуйста, помогите осилить)

Когда ввожу код:

:nth-last-child(2) {background:#ff3300;}

тогда окрашивается весь ряд ЗА картами.

Добавляю li

:nth-last-child(2) li {background:#ff3300;}

окрашивается фон карт.
По какой логике это работает? Пожалуйста объясните на пальцах. Просмотрел все материалы и все равно туговато заходит))

Дальше - ещё хлеще)
Добавляю по отдельности либо ul либо .cards

ul:nth-last-child(2) li {background:#ff3300;}
:nth-last-child(2).cards li {background:#ff3300;}

ни чего не меняется.

Но как только добавляю одновременно и ul и .cards

ul:nth-last-child(2).cards li {background:#ff3300;}

тогда у этой строки меняется приоритет на более высокий чем у li.

Логика приоритета между ul и li - ясна . Не ясно опять же почему такая, на мой взгляд, странная комбинация добавления ul и .cards нужна для этого. Не догоняю логики.

Спасибо!


#2

Ссылку на задание прикрепите, пожалуйста.


#3

давайте по пунктам.

селектор :nth-last-child(2) выберет второй с конца дочерний элемент у всех родителей: для body это будет второй с конца ul (ваш "фон за картами - это как раз и есть ul, вся строка целиком), для ul - это будет второй с конца li (отдельно карта)
картинка в этом случае должна выглядеть вот так:

когда вы добавляете в конец li, то это будет означать: "необходимо выбрать все li, которые находятся внутри элемента, который является вторым с конца дочерним элементом своего родителя"
выше мы разбирали:

  1. для body второй с конца - это ul, вот и выбираем все li (все карты) внутри него.
  2. для ul второй с конца - это li, но внутри него нет других li, которые мог бы выбрать этот селектор
    картинка будет такая:

ul:nth-last-child(2) li - означает: “необходимо выбрать все li, которые находятся внутри ul, который является вторым с конца дочерним элементом своего родителя” (т.е. то, что мы разобрали выше)

:nth-last-child(2).cards li - означает: "необходимо выбрать все li, которые находятся внутри элемента, который является вторым с конца дочерним элементом своего родителя и при этом относится к классу .cards"
таким, вторым с конца и при этом .cards будет являться только ul, т.е. этот селектор будет равнозначен :nth-last-child(2).cards li

Но как только добавляю одновременно и ul и .cards

ul:nth-last-child(2).cards li {background:#ff3300;}
тогда у этой строки меняется приоритет на более высокий чем у li.

честно, не поняла про какую смену приоритета вы здесь говорите, по селектору имеем всё то же: “необходимо выбрать все li, которые находятся внутри ul, который является вторым с конца дочерним элементом своего родителя и при этом относится к классу .cards” и выделяет он всё те же все карты во второй снизу строке.