CSS-селекторы с котиками

12-05-2017
CSS-селекторы с котиками


Вам удобнее воспринимать информацию в визуальном формате? При попытке написать какой-либо CSS-селектор вы впадаете в недоумение, как и наш пушистый дружок? Если это про Вас, то не переживайте, мы исправим эту ситуацию. Если Вы только начинаете изучать синтаксис CSS-селекторов, то, вполне вероятно, сталкиваетесь с трудностями запоминания новой информации. Так что, давайте потренируемся на кошках =)

Выбор родителя


Выбор родительского элемента также прост, как и написание самого класса (class), уникального идентификатора (id) или какого-либо элемента селектора. Добавьте в описание селектора блок объявлений и вот уже дело сдвинулось с места. Вот пример разметки:
<div class="parent"> <div class="child"></div> <div class="child"></div>
</div>
.parent { border: 10px solid cyan;
} 

Вот, как наши настройки стиля для класса .parent повлияют на DOM (Document Object Model — Объектная Модель Документа), синим цветом выделен выбранный нами элемент:
CSS-селекторы с котиками


Выбираем потомка


Необходимо знать, что потомки бывают двух видов. Первый – непосредственный (прямой) потомок, который вложен в родителя без использования каких-либо других элементов. Второй - включает в себя прямых потомков, а также все другие элементы входящие в дерево родительского элемента. Сейчас мы рассмотрим эти моменты более подробно.

Прямые потомки


Указанным между элементами символ «>» указывает браузеру на то, чтобы он нашел первый (родительский) селектор, а затем уже вернулся внутрь, чтобы найти селектор всех потомков, входящих в этот элемент. В следующем примере мы рассмотрим прямых потомков .child входящих в наш элемент .parent:
<div class="parent"> <div class="child"> <div class="grand child"></div> </div> <div class="child"></div>
</div>
.parent > .child { border: 10px solid cyan;
} 

Выделенные синей рамкой котейки являются прямыми потомками элемента .parent:
CSS-селекторы с котиками


Не прямой потомок


Селектор не прямого потомка менее специфичен, чем его прямой потомок. Он будет направлен на любой элемент .child вне зависимости от того, насколько глубоко уходит DOM-дерево. Чтобы начать использовать такой способ, необходимо просто поставить пробел между селекторами. В следующем примере мы будем искать любые элементы вложенные в .parent с классом .child.
<div class="parent"> <div class="child"></div> <div class="grand child"></div> <div class="child"></div>
</div>
.parent .child { border: 10px solid cyan;
} 

Ну и, собственно, вот, как это работает:
CSS-селекторы с котиками


Выбор смежного элемента


Смежный элемент – это элемент, расположенный следующим за выбранным и на одном уровне DOM-дерева. Сделать выбор этого элемента достаточно просто, вам необходимо всего лишь поставить знак «+» между двумя селекторами. Давайте взглянем на пример:
<div class="parent"> <div class="child"></div> <div class="child"></div>
</div>
<div class="sibling"> <div class="child"></div>
</div>
.parent + .sibling { border: 10px solid cyan;
} 

Как это будет отображаться на DOM:
CSS-селекторы с котиками


Использование нескольких селекторов


Иногда вам может потребоваться применить стиль к нескольким элементам. Как это сделать? Гораздо проще, чем отучить котейку рвать ваши обои. Все, что необходимо сделать – это разделить необходимые селекторы запятой. Вот пример:
<div class="parent"> <div class="child"></div> <div class="child"></div>
</div>
.parent,
.child { border: 10px solid cyan;
} 

И вот, как это отобразится на нашем DOM-дереве:
CSS-селекторы с котиками


Финишная прямая


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

CSS-селекторы с котиками
Рейтинг записи
Поделиться

Читайте также

Конструкторы сайтов

Конструкторы сайтов

08-05-2017

Конструкторы сайтов по своей сути - отличная вещь. С их помощью можно создать сайт всего лишь за 1 час, а то и быстрее. Но вот с позиции веб-разработчика и SEO-оптимизатора, нет ничего хуже сайтов, созданных на конструкторах.

ТОП-10 правил копирайтинга

ТОП-10 правил копирайтинга

07-05-2017

Немного юмора и одновременно полезной информации. Данные правила пригодятся не только копирайтерам, но и предпринимателям или SMM-щикам.

Правильный заголовок

Правильный заголовок

05-05-2017

Будем откровенны - не каждый копирайтер умеет создать достойный заголовок. При этом часто случается, что даже хороший автор не может выдавить из себя привлекательное предложение. Но что делать, если речь идёт о Landing Page?