Сделал на 100% ---- но есть вопросы

Курсы §35. Флексбокс, часть 1
1

Здравствуйте.

Задание выполнил на СТО, но:

  1. Что-то мне подсказывает, что можно было сделать и короче (комментарии - не в счет);

  2. Не могу понять, почему, в моем случае, если к ПАЛИТРЕ-4 я ставлю :last-child вместо :nth-child(4) - у меня не срабатывает ничего?

Спасибо.

/ПАЛИТРА-1/

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

.palette-box:first-child .palette-small .color-4,
.palette-box:first-child .palette-small .color-3 {
width: 20px;
}

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

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

/расположение/

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

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

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

.palette-box:first-child .palette-small .color-5 {
order: 2;
}
/расположение/

/КОНЕЦ ПАЛИТРА-1/

/ПАЛИТРА-2/

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

.palette-box:nth-child(2) .palette-small div {
width: 20px;
}

/расположение/

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

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

/расположение/

/КОНЕЦ ПАЛИТРА-2/

/ПАЛИТРА-3/

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

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

/КОНЕЦ ПАЛИТРА-3/

/ПАЛИТРА-4/

.palette-box:nth-child(4) .palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small .part {
display: flex;
}

.palette-box:nth-child(4) .palette-small .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
}

/КОНЕЦ ПАЛИТРА-4/

2

Удалил строчки 9-12 - ничего не изменилось в палитре, но если вместо 20px задать, к примеру, 40px, то значение все таки изменится. Так почему же все таки ничего не меняется при удалении селекторов полностью?

*/
.palette-box:first-child .palette-small .color-4,
.palette-box:first-child .palette-small .color-3 {
width: 20px;
}
*/

3

Конечно можно сократить. Сгруппировать общие для элементов свойства. Например, для каждой .palette-box вы задаете свойство display: flex;
Ширину для отдельных элементов прописывать не надо. Она задана до вас, значением min-width в еще одном файле стилей, подключенном к странице. Если интересно, то в инспекторе его можно просмотреть.
Для ответа на вопрос о :last-child тоже воспользуюсь инспектором.
Что выбирает такой селектор? Элемент, который является последним дочерним элементом у родителя (в данном случае body). И по коду в окне всё правильно. У body 4 дочерних элемента, выбираем последний, но…
Вот так выглядит код страницы в инспекторе:

flex.png1366×768 222 KB

Обратите внимание на пятый элемент внутри body (мной закомментирован) - тег script.
Вот и выходит, что элемента .palette-box:last-child не существует, так как последним он не является.
Решить проблему вы можете с помощью :last-of-type.
А вообще данный вопрос на усмотрение модераторов, неправильно получается.