Вложенность селекторов
Селектор потомков (селекторы разделяются пробелами)
В реальной разработке, зачастую нам приходится использовать вложенные селекторы для того чтобы добраться к внутренним элементам 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;
}Если мы попадаем в ситуацию когда стили наших селекторов одинаковые а селекторы разные, мы можем просто перечислять селекторы через запятую, в таком случае нам не придется дублировать когда CSS свойств, но они будет работать также.
Файлы с урока
Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )
