{"id":3842,"url":"\/distributions\/3842\/click?bit=1&hash=4c67e91a2a588f03561899c61c4eabfeb37008500c6498f3b9533b2e8845d454","title":"\u041e\u0431\u043e\u0436\u0430\u0435\u0442\u0435 \u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0445? ","buttonText":"\u0412\u0430\u043c \u0441\u044e\u0434\u0430","imageUuid":"11cfcef6-3125-52d0-8ef8-49fb205d3efe","isPaidAndBannersEnabled":false}
Vladimir Shaitan

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

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

В реальной разработке, зачастую нам приходится использовать вложенные селекторы для того чтобы добраться к внутренним элементам 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; }

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

Файлы с урока

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

0
Комментарии
Читать все 0 комментариев
null