Испытание: сложные палитры [31/31]

.palette-small,
.part {
display: flex;
justify-content: space-between;
}

.palette-box:first-child .palette-small {
flex-direction: column;
justify-content: center;
}

.palette-box:first-child .color-2 {
order: ;
}

.palette-box:first-child .color-3 {
order: -2;
align-self: center;
}

.palette-box:first-child .color-4 {
order: ;
align-self: center;
}

.palette-box:first-child .color-5 {
order: -1;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
align-items: flex-end;
}

.palette-box:nth-child(2) .color-4,
.palette-box:nth-child(2) .color-1 {
align-self: flex-start;
}

.palette-box:nth-child(3) .part {
flex-direction: column;
}

.palette-box:last-child .part:last-child {
flex-direction: column-reverse;
}

Испытание: сложные палитры
Добрый вечер, кто-нибудь подскажите, пожалуйста, почему в данном коде в конце не работает селектор last-child?Если поменять на last-of-type или nth-child(4), то всё нормально становится. Только не понимаю почему нельзя использовать просто last-child.

Заметил тоже самое, хотелось бы услышать ответ, first-child работает, a last-child нет.:upside_down_face:

Это правило не работает, потому что .palette-box не является непосредственным ближайшим родителем для .part. Между ними есть .palette-small.

Спасибо за ответ!
Только я всё равно не понимаю. При чём здесь то, что 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 не является последним дочерним элементом своего родителя.

1 лайк

Понятно, большое спасибо)
А ещё подскажите(или скриншот), пожалуйста, как это можно увидеть через инструменты разработчика.
В смысле я открываю в хроме инструменты разработчика, но там же показан код самой страницы, а не того , что написано в редакторе…

В левом верхнем углу инструментов есть иконка с указателем мыши. Нажав ее, вы можете выбрать указателем любой элемент страницы (.palette-box в данном случае). Код страницы будет развернут и выделенный элемент подсвечен. Останется прокрутить немного вниз.

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

Вы должны инспектировать отображение кода в мини-браузере, т. е. верхнее правое окно.

Вот оно что, дуралей я)
Спасибо большое за помощь)
Теперь всё встало на свои места)

Может кто нибудь обьяснить, почему после этого правила

.palette-box:nth-child(3) .part {
flex-direction: column;
}

в 3 блоке все заработало?

И я уже запуталась в селекторах. Если все верно и .palette-box:last-of-type выберет последнюю .palette-box, то потом нужно написать .palette-small а потом уже .part:last-child, разве нет, или как то селекторы перескачут через 1 класс?

И потом опять становится непонятно, почему при flex-direction: column-reverse; получается сделать последний блок. Ведь чтобы отдельные элементы так располагались в разных углах, нужно чтобы у них было свойство space-between и ось в другом направлении. Ведь если задать flex-direction: column-reverse;, то элементы просто должны поменять порядок, я не знаю, а не разбежаться по разным углам, нет?

.exam .palette-box .palette-small {
display: flex;
}
.exam .palette-box:first-child .palette-small {
justify-content: center;
align-items: center;
flex-direction: column;
}
.exam .palette-box:first-child .palette-small .color-2,
.exam .palette-box:first-child .palette-small .color-5 {
align-self: stretch;
}
.exam .palette-box:first-child .palette-small .color-2 {
order: 2;
}
.exam .palette-box:first-child .palette-small .color-5 {
order: 1;
}
.exam .palette-box:first-child .palette-small .color-3 {
order: 0;
}
.exam .palette-box:first-child .palette-small .color-4 {
order: 3;
}

.exam .palette-box:nth-child(2) .palette-small {
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
}
.exam .palette-box:nth-child(2) .palette-small .color-2 {
order: 3;
align-self: flex-end;
}
.exam .palette-box:nth-child(2) .palette-small .color-6 {
order: 2;
align-self: flex-end;
}
.exam .palette-box:nth-child(2) .palette-small .color-4 {
order: 1;
}

.exam .palette-box:nth-child(3) .palette-small {
justify-content: space-between;
}
.exam .palette-box:nth-child(3) .palette-small .part {
display: flex;
justify-content: space-between;
flex-direction: column;
}

.exam .palette-box:nth-child(4) .palette-small {
justify-content: space-between;
}
.exam .palette-box:nth-child(4) .palette-small .part {
display: flex;
justify-content: space-between;
}
.exam .palette-box:nth-child(4) .palette-small .part:nth-child(2) {
justify-content: space-between;
flex-direction: column;
}
.exam .palette-box:nth-child(4) .palette-small .part:nth-child(2) .color-2 {
order: 1;
}

Постаралась все максимально ужать и сократить

.palette-small,
.part {
    display: flex;
    justify-content: space-between;
}

.palette-box:first-child .palette-small {
    flex-direction: column-reverse;
    justify-content: center;
}

.palette-box:first-child .color-3{
    order: 1;
    align-self: center;
}

.palette-box:first-child .color-4{
    order: -1;
    align-self: center;
}

.palette-box:nth-child(2) .palette-small {
    flex-direction: column-reverse;
    align-items: flex-start;
}

.palette-box:nth-child(2) .color-2,
.palette-box:nth-child(2) .color-6{
    align-self: flex-end;
}

.palette-box:nth-child(3) .part {
    flex-direction: column;
}

.palette-box:nth-child(4) .part:first-child {
    flex-direction: row;
}

.palette-box:nth-child(4) .part:last-child {
    flex-direction: column-reverse;
    align-items: flex-end;
}