Объясните почему не подсвечивается первый _description?

Question

[Konstantin]

Есть такой пример https://jsfiddle.net/uanzk6pb/6/ , но почему не подсвечивается первое описание? при том же заголовок подкрашивается. Даже если оставить только селектор .landing-block__description:first-child то он не будет работать

Comments

[Vaultboy84]

Битая ссылка

Answer 1

[Рома Зварич]

Не подсвечивается, потому что псевдокласс :first-child указывает на первый элемент среди всех элементов, а не первый элемент с данным классом.

По сути, селектор .landing-block__description:first-child означает элемент с классом .landing-block__description, который является первым в разметке.
Но он ведь первым не является. Перед ним еще есть элемент с классом .landing-block__title

Comments

[Сергей delphinpro]

Для автора вопроса:
В текущей разметке можно использовать селектор

.landing-block__title:first-child + .landing-block__description {
}

[Рома Зварич]

Сергей delphinpro, не проще ли использовать псевдокласс first-of-type?

[Рома Зварич]

Сергей delphinpro, сам понял, что нет, не проще, так как если изменится тег, всё сломается

[Сергей delphinpro]

Рома Зварич, Сам спросил — сам ответил =))

Вообще, если уж там есть какие-то намётки на БЭМ, то правильно сделать

.landing-block {
  &__title {}
  &__description {}

  &__title_first {}
  &__description_first {}
}

[Рома Зварич]

Сергей delphinpro, ясно. Спасибо за ответ

Answer 2

[Vadim]

Не подсвечивается, потому что .landing-block__description у вас не first-child в своем родителе. Он должен быть именно первым элементом внутри блока.