Simple selectors

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

В первой статье по селекторам мы изучим "простые" селекторы, называемые так потому, что они напрямую идентифицируют элемент или несколько элементов страницы на основании типа элемента (или его класса (class) или id.)

Селекторы типа, они же селекторы элементов

Селектор типа - это простое (и не зависящее от регистра) отображение имени HTML-элемента в имя соответствующего селектора. Это самый простой способ адресовать все элементы определенного типа. Рассмотрим пример:

Вот HTML-код:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

Простая таблица стилей:

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

Получаем следующее:

Упражнения: Выбор различных элементов

В качестве упражнения попробуйте изменять селектор в CSS-правиле так, чтобы придать оформление различным элементам приведенного ниже документа. А как написать селектор, чтобы применить этот набор правил сразу к нескольким элементам?

Если сделаете ошибку, всегда можно перезагрузить документ кнопкой Reset. Если "застрянете", жмите кнопку Show solution, чтобы посмотреть один из возможных вариантов.

Селекторы классов (Class selectors)

Селектор класса состоит из точки '.', за которой следует имя класса. Имя класса - это любое не содержащее пробелов значение в HTML-атрибуте class. Следует заметить, что разные элементы могут принадлежать к одному и тому же классу, и, в то же время, отдельный элемент может принадлежать сразу к нескольким классам, имена которых разделяются пробелом. Небольшой пример:

Вот некоторый документ HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

Простая таблица стилей:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

В результате получаем:

Упражнение: Работа с несколькими классами

В качестве упражнения измените атрибуты классов у элементов параграфа так, чтобы к этим параграфам было применено несколько эффектов стиля одновременно.  Попробуйте использовать класс base-box class плюс ролевой класс (editor-note или warning), и, в качестве дополнительного задания, класс important, подчеркивающий  показать важность текста. Подумайте, как такой вид набора правил позволяет строить модульную таблицу стилей.

Если сделаете ошибку, всегда можно перезагрузить документ кнопкой Reset. Если "застрянете", жмите кнопку Show solution, чтобы посмотреть один из возможных вариантов.

Селекторы по ID

ID-селектор состоит из символа решетки (#), за которым следует ID нужного элемента. Каждый элемент может иметь уникальный идентификатор, назначаемый атрибутом id. Что выбрать в качестве значения ID зависит только от вас. Такой селектор является самым эффективным способом обозначить отдельный элемент.

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

Рассмотрим пример — вот HTML-код:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

Простая таблица стилей:

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

В результате получаем:

Упражнение: раскрасим победителей с помощью ID

В качестве упражнения выделите занявших первое, второе и третье места в соревновании золотым, серебряным и бронзовым цветами, введя в правила 2–4 селекторы, выбирающие элементы на основании их ID.

Если сделаете ошибку, всегда можно перезагрузить документ кнопкой Reset. Если "застрянете", жмите кнопку Show solution, чтобы посмотреть один из возможных вариантов.

Универсальный селектор

Универсальный селектор (*) - это предельный случай джокера. Он позволяет выбрать все элементы страницы. Поскольку выбирать сразу все элементы страницы нужно бывает редко, его обычно используют в сочетании с другими селекторами (как в Combinators ниже.)

Обратите внимание: Будьте осторожны при использовании универсального селектора. Поскольку он применяется сразу ко всем элементам, его использование по отношению к большим документам веб оказывает ощутимое влияние на производительность. Существует не так уж много ситуаций, когда его имеет смысл использовать.

А теперь пример; сначала HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

Затем простая таблица стилей:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Получаем следующий результат:

Комбинации

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

  • Селектор потомка  —  (пробел) — позволяет выбрать элемент, вложенный в другой элемент (не обязательно прямого потомка, это может быть, например, "внук" )
  • Селектор прямого потомка  — > — позволяет выбрать непосредственного потомка другого элемента.
  • Селектор смежного сиблинга — + — позволяет выбрать элемент, который является непосредственным сиблингом другого элемента (то идущего следом за ним и находящегося на том же уровне в иерархии).
  • Общий селектор сиблинга  — ~ — позволяет выбрать любой элемент, являющийся сиблингом другого (то есть находящегося на том же уровне иерархии, но не обязательно сразу же следом).

Пример того, как это работает:

<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading 2</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>
section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}

Таблица стилей CSS придает HTML-документу следующий вид:

Селекторы работают так:

  • section p выбирает все элементы <p> — как первые два, являющиеся непосредственными потомками элемента <section>, так и другие два, которые являются "внуками" элемента <section> (они находятся еще и внутри элемента <div>). Соответственно, весь текст параграфов становится голубым.
  • section > p выбирает только первые два элемента <p>, являющиеся непосредственными потомками элемента  <select> (но не два других, которые непосредственными потомками не являются). Желтый цвет фона, таким образом, получают только два первых параграфа.
  • h2 + p выбирает только те элементы <p>, которые идут сразу же за элементами <h2> на том же уровне иерархии — в данном случае это первый и третий параграфы. Поэтому текст этих двух параграфов выведен в верхнем регистре.
  • h2 ~ p выбирает все элементы <p>, находящиеся на одном уровне (и идущие после) с элементом  <h2> — в данном случае это все параграфы. Поэтому все они имеют прерывистую границу.

В следующей статье

Итак, первый учебник по селекторам закончен! Надеюсь, вам понравилось играть с селекторами — теперь, когда мы познакомились с основными, чаще всего используемыми селекторами, перейдем к более продвинутым, и начнем с Селекторов по атрибутам.

Метки документа и участники

 Внесли вклад в эту страницу: mgalkina
 Обновлялась последний раз: mgalkina,