Почему при обращении к первому .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;
}
вы неправильно понимаете работу псевдоклассов.
.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 лайк