Урок #4 - Вложенные селекторы в CSS

Привет, в этом уроке мы на примерах рассмотрим способы комбинировния селекторов в CSS и разберемся как вкладывать селекторы друг в друга. Приятного просмотра, не забудь поставить лайк, оформить подписку и оставить комментарий.

Мои соц. сети:

#CSS #HTML #web #ShaitanVladimir #frontend #верстка

--------- Транскрипт урока ---------

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

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

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

Решение:
main article h2 {
font-size: 28px;
}

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

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

.articles article h2 {
font-size: 32px;
color: deeppink;
}

.news article h2 {
font-size: 28px;
color: blueviolet;
}

[cjzopyq]

а как быть с неочивидными заголовками? вдруг сеошник захочет поменять h2 на h4 например и вся конструкция упадет тогда

[VladimirShaitan]

Привет, если хочешь получить файлы с урока то лайкни это видео, подпишись на канал и напиши об этом в комментариях чтобы я мог тебя найти ))

[onscegi]

. А расположить CSS и HTML рядом, религия не позволяет?