Селекторы типа, класса и ID

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

В этом уроке мы рассмотрим самые часто используемые селекторы.

Предпосылки : Базовая компьютерная грамотность, basic software installed, базовые знания работы с файлами, основы HTML (изучите Введение в HTML), и понимание работы CSS (изучите Введение в CSS.)
Задача: Узнать о различных селекторах CSS, которые мы можем использовать, чтобы применить CSS к документу.

Селекторы по типу

Селектор типа иногда упоминается как селектор имени тега или селектор элемента, потому что он выбирает HTML тег/элемент в вашем документе. В примере ниже мы использовали селекторы span, em и strong. Поэтому все экземпляры элементов <span>, <em> и <strong> стилизованы.

Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.

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

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

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

Использование универсального селектора, чтобы облегчить чтение ваших селекторов

Одно из применений универсального селектора состоит в том, чтобы сделать селекторы более легкими для чтения и более понятными с точки зрения того, что они делают. Например, если я хочу выбрать первый дочерний элемент какого-либо элемента <article>, вне зависимости от того какой это элемент, и выделить его жирным, я могу использовать селектор :first-child, о которм мы ухнаем больше из урока про псевдо-классы и псевдо-элементы, как о селекторе-потомке вместе с селектором элемента <article>

article :first-child {
}

Однако это можно спутать с article:first-child, который выберет любой элемент <article>, который является первым дочерним элементом другого элемента .

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в селектор :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым потомком элемента <article>:

article *:first-child { 
} 

Селекторы классов

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

Ориентация классов на отдельные элементы

Вы можете создать селектор, который будет нацелен на определенные элементы с примененным классом. В следующем примере мы выделили элемент <span> с классом highlight иначе чем элемент <h1> с классом highlight. Мы сделали это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробелов между ними.

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

Выбор элемента, если к нему применено более одного класса

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

В примере ниже у нас есть <div> содержащий примечание. Серая граница применятеся когда блок имеет класс notebox. Если у блока есть также классы warning или danger, мы меняем border-color.

Мы можем указать браузеру, что нужно сопоставить элемент только в том случае, если к нему применены два класса, связав их вместе без пробелов между ними. Вы увидите, что к последнему элементу <div> не применяется стиль, так как он имеет только класс danger он также нуждается в классе notebox, чтобы применить что-либо.

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

ID-селекторы начинаются с символа # а не с точки, но в основном используются также как и селекторы классов. Однако ID может быть использован единожды в документе, и элемент может иметь только один id указывающий на него. It can select an element that has the id set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. Вы можете увидеть оба варианта использования в следующем примере:

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность и переопределяет большинство других селекторов. Это может усложнить задачу. В большинстве случаев приоритетнее добавить class элементу, чем использовать ID, однако, если использование ID это единственный способ, чтобы выделить элемент — возможно, потому что у вас нет доступа к разметке и, следовательно, вы не можете ее редактировать — это сработает.

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

We'll continue exploring selectors by looking at attribute selectors.

В этом модуле

  1. Cascade and inheritance
  2. CSS-селекторы
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS