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

Описание

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

Мои соц. сети:
Telegram - https://t.me/VS_FRONTEND
LinkedIn - https://www.linkedin.com/in/vladimir-shaitan/
Twitter - https://twitter.com/VovaShaitan
Facebook - https://www.facebook.com/vladimir.shaitan
Instagram - https://www.instagram.com/vlad.sha/

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

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

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

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

Рассмотрим пример - selectors_nesting.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;
}