В чём разница между данными способами перечисления селекторов css?

Question

[froggush]

Почему данный вид селектора работает?

.works-nav__item.slick-slide.slick-current.slick-active {
    border-top: 3px solid #fff;
}

А данный - нет?

.works-nav__item .slick-slide .slick-current .slick-active {
    border-top: 3px solid #fff;
}

Данный код делает толще и ярче границу текста в навигационной панели slick-slider'a. Если задавать селектор без пробелов всё работает. Если с пробелами - не работает. Почему?

Answer 1

[kunjut19]

вы задаете стиль элементу, которому присвоены все эти классы

.works-nav__item.slick-slide.slick-current.slick-active

вы задаете стиль элементу .slick-active, который находится внутри .slick-current, который находится внутри .slick-slide, который находится внутри .works-nav__item

.works-nav__item .slick-slide .slick-current .slick-active

Answer 2

[Арсений Матыцин]

Пробел между селекторами это комбинатор. Их есть еще несколько.