Вложенность селекторов⁠⁠

Селектор потомков (селекторы разделяются пробелами)

В реальной разработке, зачастую нам приходится использовать вложенные селекторы для того чтобы добраться к внутренним элементам HTML структуры.

Рассмотрим пример - selectors_nesting.html

Задача 1

Нам нужно сделать заголовки каждого article больше чем они есть сейчас, мы конечно можем каждому <h2> внутри article задать отдельный класс и обратится к нем, и это будет даже правильно, но в любом случае в таких ситуациях нам нужно будет обратится к их родителю чтобы было понятно какие именно заголовки и внутри какого блока мы хотим увеличить.

Решение:

main article h2 {
font-size: 28px;
}

В данном случае мы указали комбинацию из 3х селекторов, мы уже знаем как они работают по отдельности, но разделив их пробелом браузер интерпретирует их как один большой селектор. В данном случае браузер будет брать только те теги <h2> которые находятся внутри тега <article> который в свою очередь находится внутри тега с классом .articles.

P.S. Не стоит увлекаться и использовать большие вложенности селекторов, наоборот, старайтесь использовать комбинации не более 2-3х селекторов.

Задача 2

В нашем html файле есть 2 section с классами articles и news, нам необходимо изменить код который мы писали выше, чтобы сделать заголовки статей в блоке .articles размером 32px и цветом deeppink, а в блоке .news размер заголовков должен быть 28px и их цвет blueviolet.

Решение:

Дочерний селектор (селекторы разделяются символом '>' ) Задача 3: У наших секций articles и news также есть заголовки, и нам нужно выделить их отдельным цветом blue и задать им размер шрифта в 50px. Попробуем это сделать.

main .articles h2 {
color: blue;
font-size: 50px;
}
main .news h2 {
color: blue;
font-size: 50px;
}

Дочерний селектор (селекторы разделяются символом '>' )

Задача 3

У наших секций articles и news также есть заголовки, и нам нужно выделить их отдельным цветом blue и задать им размер шрифта в 50px. Попробуем это сделать.

main .articles h2 {
color: blue;
font-size: 50px;
}
main .news h2 {
color: blue;
font-size: 50px;
}

Решение

Перейдя на страницу мы видим что абсолютно все теги <h2> приняли такие стили, хотя мы этого не хотели, в таком случае мы можем задать атрибут класс для нужных нам заголовков и стилизовать или использовать символ '>' когда пишем вложенность.

main .articles > h2 {
color: blue;
font-size: 50px;
}
main .news > h2 {
color: blue;
font-size: 50px;
}

Немного усовершенствуем наше решение

main .articles > h2,
main .news > h2 {
color: blue;
font-size: 50px;
}

Если мы попадаем в ситуацию когда стили наших селекторов одинаковые а селекторы разные, мы можем просто перечислять селекторы через запятую, в таком случае нам не придется дублировать когда CSS свойств, но они будет работать также.

Добираемся к элементу по нескольким селекторам ( селекторы не разделяются )

В таком случае селекторы которые мы используем являются одним целым селектором.

a#link.read-more {
color: blue;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}

Обычно такой способ используется для увеличения веса селектора.

Файлы с урока

1. HTML File

2. CSS File

P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )