окрашивается фон карт.
По какой логике это работает? Пожалуйста объясните на пальцах. Просмотрел все материалы и все равно туговато заходит))
Дальше - ещё хлеще)
Добавляю по отдельности либо 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 нужна для этого. Не догоняю логики.
селектор :nth-last-child(2) выберет второй с конца дочерний элемент у всех родителей: для body это будет второй с конца ul (ваш "фон за картами - это как раз и есть ul, вся строка целиком), для ul - это будет второй с конца li (отдельно карта)
картинка в этом случае должна выглядеть вот так:
когда вы добавляете в конец li, то это будет означать: “необходимо выбрать все li, которые находятся внутри элемента, который является вторым с конца дочерним элементом своего родителя”
выше мы разбирали:
для body второй с конца - это ul, вот и выбираем все li (все карты) внутри него.
для 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” и выделяет он всё те же все карты во второй снизу строке.
