Флексбокс часть вторая 6/28 100%, но вопрос по селекторам

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

Почему если я обращаюсь к селекторам класса без уточннения родителя, то стили не работают?
Например: [class$=“olive”] - не работает,
а .palette [class$=“olive”] - работает

.palette {
     display: flex;     
}



.palette div {   
    min-width: 35px;
    min-height: 35px;  
    height: 100px;
    margin: 5px;
}

.palette [class$="olive"],
.palette [class$="fuchsia"] {
    margin-left: auto;
}

.palette [class$="aqua"] {
    margin-right: auto;
}



.palette [class$="yellow"] {
    margin-top: auto;
}

.palette [class$="olive"],
.palette [class$="aqua"] {
    width: 50px;
    height: 150px;
    margin-top: auto;
    margin-bottom: auto;
}
2

сейчас доступа к платным курсам у меня нет и я не могу глянуть задание, но думаю, что дело в специфичности селекторов (см. https://htmlacademy.ru/courses/66/run/15)

1 лайк
3

Специфичность стилей, которые задаются блокам по умолчанию, оказывается больше и перезаписывает ваши. А селектор .palette [class$="olive"] уже специфичнее, чем базовые стили.

2 лайка
4

Помогите еще, пожалуйста, разобраться. Чтобы сократить код, можно ли использовать псевдокласс :nth-child (.palette div:nth-child(3n+1)) вместо селекторов .palette [class$=“olive”], .palette [class$=“aqua”] {…} Насколько это вообще уместно, и как будет правильней по фен-шую)?

Вот мое решение:

.palette {
display: flex;
}

.palette div {
min-width: 35px;
min-height: 35px;
height: 100px;
margin: 5px;
}

.palette div:nth-child(odd) {
margin-left: auto;
}

.palette [class$=“aqua”] {
margin-right: auto;
}

.palette [class$=“yellow”] {
margin-top: auto;
}

.palette div:nth-child(3n+1) {
margin-top: auto;
margin-bottom: auto;
flex-basis: 50px;
height: 150px;
}

5

С подгонкой еще вариант получился.
.palette {
display: flex;
}

.palette div {
min-width: 35px;
min-height: 35px;
}

.color-olive {
margin: auto 10px auto auto;
width: 50px;
height: 150px;
}

.color-yellow {
height: 100px;
margin: auto 16px 5px 0;
}

.color-fuchsia {
height: 100px;
margin: 5px 0 auto 16px;
}

.color-aqua {
margin: auto auto auto 10px;
width: 50px;
height: 150px;
}