Основы 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