31/31 Обращение к селектору

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

Почему при обращении к первому .palette-small и присваивании свойства flex-direction: column оно присваивается всем другим квадратам?



Или я не правильно понимаю процесс обращения к первому .palette-small?

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

.part:nth-child(1),
.part:nth-child(2){
  flex-direction: column;
  justify-content: space-between;
}
.palette-small:first-child{
  flex-direction: column;
}
2

вы неправильно понимаете работу псевдоклассов.

.selector:first-child означает, что он будет применен ко всем элементам с таким классом (selector), которые являются первыми дочерними элементами по отношению к неназванному родительскому контейнеру.
palette-small является первым дочерним элементом каждого palette-box (родителя).
выходит, что вы применяете правило к каждому квадрату.

если вы хотели обратиться к первому квадрату, следует написать:
.palette-box:first-child .palette-small
или
.palette-box:nth-child(1) .palette-small
или
.palette-box:nth-of-type(1) .palette-small (самый надежный вариант)

1 лайк