Frontender Magazine

Основы CSS-селекторов на примере котиков

confused-cat

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

Выбираем родителей

Чтобы выбрать родительский элемент, достаточно использовать в качестве селектора класс, id или имя элемента. Добавьте после селектора блок объявлений, и этого будет достаточно! Вот пример разметки и стилей:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>


.parent {
  border: 10px solid cyan;
}

Вот как стили повлияют на DOM (голубым подсвечен элемент, выбранный нашим селектором):

dom-cats

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

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

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

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

Эти селекторы выберут следующие элементы DOM:

cats

Косвенные потомки

Селектор для выбора косвенных потомков менее специфичен, чем селектор для выбора прямых потомков. Он выберет все элементы .child, вложенные в элемент .parent, независимо от того, насколько глубоко они находятся в DOM-дереве. Чтобы получить такой селектор, нужно разделить два селектора обычным пробелом. В этом примере мы выберем все дочерние .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;
}

Вот как это будет работать:

cats

Выбираем соседние элементы

Соседним называется элемент, следующий сразу за выбранным элементом, причём они оба располагаются на одном уровне 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:

cats

Применяем несколько селекторов

Иногда вам может потребоваться применить стили к множеству разных элементов. Как это сделать? Ответ прост: нужно записать селекторы через запятую:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>


.parent,
.child {
  border: 10px solid cyan;
}

Вот как это сработает на DOM:

cats

Финишируем

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

Права

Спасибо всем любителям котиков с Flickr. Все котики распространяются под Creative Commons Attribution 2.0 Generic.

cat

header-cat | parent-cat-one | kitten-one | kitten-two full-cat-one | full-cat-two | goofy-cat | sibling-cat

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Mike Borsare
Автор:
Mike Borsare
Сaйт:
http://mikeborsare.com/
GitHub:
mborsare
Twitter:
@mborsare
Андрей Романов
Переводчик:
Андрей Романов
Сaйт:
http://andrew-r.ru/
GitHub:
andrew--r
ВКонтакте:
http://vk.com/andrew_r

Комментарии (6 комментариев, если быть точным)

Автар пользователя
P0jar

Я бы на примере котиков прочитал про HTML DOM. =)

Автар пользователя
MagistrAVSH

На примере котиков можно много чего изучать. Котики чрезвычайно эффективное средство.

Автар пользователя
AmelNospam

Ув. коллеги! Я прошу прощения, но с котиками, это как с сусликом? (в смысле ты его не видишь, но он есть?). У меня, к примеру, ни один абзац ничего не иллюстрирует (ни котиков, ни сусликов).

Автар пользователя
AmelNospam

Прошу прощения, виной тому был включен режим "Opera Turbo". Отключил - и всех котиков стало отображать. Спасибо за ресурс.

Автар пользователя
uRusure

Хорошая статья. Но как же псевдоклассы nth-child, first-child, odd-child и т. д.?

Автар пользователя
katrek

Спасибо за перевод данной статьи.