Добрый вечер, кто-нибудь подскажите, пожалуйста, почему в данном коде в конце не работает селектор last-child?Если поменять на last-of-type или nth-child(4), то всё нормально становится. Только не понимаю почему нельзя использовать просто last-child.
Спасибо за ответ!
Только я всё равно не понимаю. При чём здесь то, что palette-box не является непосредственным родителем для парт? Можете это объяснить?Похоже я что-то не так понял, но ведь селектор last-child выбирает последний дочерний элемент родителя, т.е. в данном случае .palette-box:last-child должен указывать на то, что нужно выбрать последний элемент с классом .polette-box у своего родителя, т.е. у body. Дальше в .part:last-child указывается, что нужно выбрать последний дочерний элемент у palette-small, т.е. последний part.
В правиле .palette-box:first-child .color-3 всё работает, хотя здесь palette-box тоже не является непосредственным ближайшим родителем для .color-3, между ними тоже есть .palette-small
Да, вы правы. Дело оказалось не в этом. Если смотреть код страницы через инструменты разработчика, можно заметить, что после последнего .palette-box в коде идет тег script. Поэтому получается, что .palette-box не является последним дочерним элементом своего родителя.
Понятно, большое спасибо)
А ещё подскажите(или скриншот), пожалуйста, как это можно увидеть через инструменты разработчика.
В смысле я открываю в хроме инструменты разработчика, но там же показан код самой страницы, а не того , что написано в редакторе…
В левом верхнем углу инструментов есть иконка с указателем мыши. Нажав ее, вы можете выбрать указателем любой элемент страницы (.palette-box в данном случае). Код страницы будет развернут и выделенный элемент подсвечен. Останется прокрутить немного вниз.
Да, я понимаю как это обычно делается, но тут когда так делаешь выделяется целиком окно редактора кода, т.е. в инструментах разработчика отображается код страницы задания, а код, написанный в строенном редакторе на этой странице, я не понимаю как посмотреть.
И я уже запуталась в селекторах. Если все верно и .palette-box:last-of-type выберет последнюю .palette-box, то потом нужно написать .palette-small а потом уже .part:last-child, разве нет, или как то селекторы перескачут через 1 класс?
И потом опять становится непонятно, почему при flex-direction: column-reverse; получается сделать последний блок. Ведь чтобы отдельные элементы так располагались в разных углах, нужно чтобы у них было свойство space-between и ось в другом направлении. Ведь если задать flex-direction: column-reverse;, то элементы просто должны поменять порядок, я не знаю, а не разбежаться по разным углам, нет?