Как обратиться к блоку внутри блока в css?

Question

[ZMaxonchik]

Всем привет!
Как правильно обращаться к блокам внутри блоков?

Вот код на SASS

.block1 {
.block2 {
.block3 {

}
}
}

Как правильно обратиться к блоку 3 на CSS? Или достаточно будет сразу просто писать .block3 {} ?

Comments

[Rustam Bainazarov]

Если он уникальный и не модифицируется родительскими блоками, то правильно напрямую к .block3.

Слишком общий вопрос. Слишком много сценариев.

[ZMaxonchik]

спасибо, а если внутри block3 есть ссылка со стилем link, то обращаться к ней напрямую .link {}
или
.block3 .link {}
либо вообще .block3 a {} ?

[Rustam Bainazarov]

ZMaxonchik, никто не ответит. Зависит от степени уникальности вашей .link.

[ZMaxonchik]

Рустам Байназаров, .link уникальна

[Сергей delphinpro]

Фигня это, а не код.
Понимаю, что вы начинаете.
Не пишите вложенные селекторы без крайней необходимости.
Селектор должен быть с минимально необходимой специфичностью

.block1 {}
.block2 {}
.block3 {}

А вот уже если block3 должен быть красным, только если он вложен в block1 и никак иначе, то можно написать .block1 .block3 { color: red; }

[Rustam Bainazarov]

ZMaxonchik, тогда обращайтесь напрямую.

Answer 1

[Владимир Проскурин]

Ну, если вы напишите
.block3 {}
то все элементы на странице, с классом block3 получают описанные в этом блоке стили. Если вот так
.block1 .block2 .block 3 {}
то применят на себя стили только элементы block3, которые находятся внутри блока block2, который находится внутри блока block1.

Answer 2

[iBird Rose]

а взять и самому посмотреть откомпиленный css твоего scss не судьба?
skrinshoter.ru/v/140519/ixSskVbO?a

https://codepen.io/anon/pen/arpvjQ