DevGang
Авторизоваться

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

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

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

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

Задача 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 свойств, но они будет работать также.

* * *

Файлы с урока

HTML File

CSS File

* * *

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

Источники:

#CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Vladimir Shaitan - Видео блог о frontend разработке и не только

Посмотреть