Сделал, но вопросы остались

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

Все предидущие испытания по флексбоксам не мог обойтись без подсказок, а самое финальное получилось сделать самому и подозрительно быстрро)
Прошу прежде всего оценить мой код:

.brick-layout {
    box-sizing: content-box;
    width: 400px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    
}

.brick {
    min-height: 80px;
    min-width: 100px;
    margin: 5px;
}

.color-aqua:nth-child(2) {
    flex-grow: 1;
}

.color-yellow {
    flex-grow: 1;
}

.color-yellow:nth-child(5) {
    flex-grow: 0;
}

.color-fuchsia:nth-child(8) {
    flex-grow: 1;
}

А главное, что для меня тут не понятно(видимо, за обилием новой информации, начал забывать давно пройденное) - так это почему :nth-child указанный для конкретного класса-цвета требует указывать номер потомка точно такой же как если бы я указал общий для всех блоков класс .brick

.brick-layout {
    box-sizing: content-box;
    width: 400px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    
}

.brick {
    min-height: 80px;
    min-width: 100px;
    margin: 5px;
}

.brick:nth-child(2) {
    flex-grow: 1;
}

.color-yellow {
    flex-grow: 1;
}

.brick:nth-child(5) {
    flex-grow: 0;
}

.brick:nth-child(8) {
    flex-grow: 1;
}

Хотелось бы прояснить и этот момент, хоть он и не относится к данному разделу

2

.brick-layout {
box-sizing: content-box;
width: 400px;
padding: 5px;
display: flex;
flex-wrap: wrap;
}

.brick {
min-height: 80px;
min-width: 100px;
margin: 5px;
}

.brick:nth-child(even) {
flex-grow: 1;
}