CSS селекторы

CSS селекторы

Селектор CSS - это шаблон, соответствующий элементам HTML-документа. Соответствующие правила стиля применяются к элементам, которые соответствуют шаблону селектора.

Что такое селектор

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

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

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

* {
  margin: 0;
  padding: 0;
}

Правила стиля внутри селектора * будут применяться ко всем элементам в документе.

Селектор типа элемента (селектор тега)

Селектор типа элемента сопоставляет каждый экземпляр элемента в дереве документа с соответствующим именем типа элемента.

p {
  color: blue;
}
блок 1

Правила стиля внутри селектора p будут применяться к каждому элементу <p> в документе и окрашивать текст внутри этого тега в синий цвет, независимо от их положения в дереве документа.

Селектор id

Селектор id используется для определения правил стиля для одного уникального элемента (по правилам, в документе может быть только один элемент с уникальным id).

Селектор идентификатора определяется со знаком хеша (#), за которым сразу следует значение идентификатора.

#error {
  color: red;
}

Это правило стиля отображает текст элемента красным цветом, для тега id которого имеет значение error.

Селектор класса (class)

Селекторы класса могут использоваться для выбора любого HTML-элемента, который имеет атрибут класса. Все элементы этого класса будут отформатированы в соответствии с заданным правилом.

Селектор класса определяется знаком точки (.) за которым сразу следует название класса.

.blue {
  color: blue;
}

Приведенные выше правила стиля отображают текст синим цветом для каждого элемента в документе, у которого атрибут класса установлен в blue. Вы можете сделать правило более конкретным добавив название элемента. Например:

p.blue {
  color: blue;
}

Правило стиля внутри селектора p.blue отображает текст синим цветом только тех элементов <p>, у которых атрибут класса установлен в синий цвет и не влияет на другие абзацы. Цвет текста не будет синим для других элементов имеющих этот класс, например div.

Селекторы потомков (вложенных элементов)

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

ul.menu li a {
  text-decoration: none;
}
h1 em {
  color: green;
}

Правила стиля внутри селектора ul.menu применяются только к тем элементам <a>, которые содержатся внутри неупорядоченного списка, имеющего класс .menu, и не влияют на другие ссылки внутри документа или внутри списка. Аналогично, правила стиля внутри селектора h1 em применяются только к элементам <em>, содержащимся внутри заголовка <h1>.

Селекторы прямых потомков (селектор дочернего элемента)

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

ul > li {
  list-style: square;
}
ul > li ol {
  list-style: none;
}

Правило стиля внутри селектора ul > li применяется только к тем элементам <li>, которые являются прямыми потомками элементов <ul> и не влияют на другие элементы списка.

Селектор соседних элементов

Селекторы соседних элементов могут использоваться для выбора элементов находящихся на одном уровне в DOM. Этот селектор имеет следующий синтаксис: E1 + E2, где E2 - цель селектора.

Селектор h1 + p в приведенном ниже примере выберет элементы <p>, только если оба элемента <h1> и <p> имеют одного и того же родителя в дереве документа и <h1> непосредственно предшествует элементу <p>. Это означает, что только те абзацы, которые идут сразу после каждого заголовка <h1>, будут иметь соответствующие правила стиля.

h1 + p {
  color: blue;
  font-size: 18px;
}
ul.task + p {
  color: #f0f;
  text-indent: 30px;
}

Селектор всех соседних элементов

Общий селектор всех соседних элементов похож на предыдущий селектор (E1 + E2), но он менее строг. Обычный селектор состоит из двух простых селекторов, разделенных символом тильды (∼). Это можно записать так: E1 ∼ E2, где E2 - цель селектора.

Селектор h1 ∼ p в приведенном ниже примере выберет все элементы <p>, которым предшествует элемент <h1>, где все элементы имеют одного и того же родителя в дереве документа. Т.е. элемент <p> не обязательно должен следовать непосредственно после заголовка.

h1 ∼ p {
  color: blue;
  font-size: 18px;
}
ul.task ∼ p {
  color: #f0f;
  text-indent: 30px;
}

Группировка селекторов

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

h1 {
  font-size: 36px;
  font-weight: normal;
}
h2 {
  font-size: 28px;
  font-weight: normal;
}
h3 {
  font-size: 22px;
  font-weight: normal;
}

Как вы можете видеть в приведенном выше примере, одинаковое правило стиля font-weight: normal; используется селекторами h1, h2 и h3. Таким образом, он может быть сгруппирован в список через запятую, например так:

h1, h2, h3 {
  font-weight: normal;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 28px;
}
h3 {
  font-size: 22px;
}
блок 3

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*