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

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

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

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

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

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

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

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

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

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

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

article :first-child  font-weight: bold; > 

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

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

article *:first-child  font-weight: bold; > 

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

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

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

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

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

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

Нацеливание на элемент, к которому применено более одного класса

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

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

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему не применён ни один стиль, так как он имеет только класс danger ; ему нужен ещё и класс notebox , чтобы получить какую-нибудь стилизацию.

Селекторы ID

Селектор ID начинается с # , а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id . Можно выбрать элемент, которому присвоен id , а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

**Предупреждение:**Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

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

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

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Комбинации селекторов

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

Группирование селекторов (А, B)

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

Пример 1. Стиль для каждого селектора

h1 < font-family: Arial, Helvetica, sans-serif; font-size: 1.6rem; color: #003; >h2 < font-family: Arial, Helvetica, sans-serif; font-size: 1.3rem; color: #333; >h3 < font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; color: #900; >p

Из данного примера видно, что стиль для элементов , , содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.

Пример 2. Сгруппированные селекторы

h1, h2, h3 < font-family: Arial, Helvetica, sans-serif; >h1 < font-size: 1.6rem; color: #003; >h2 < font-size: 1.3rem; color: #333; >h3

В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.

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

h2, .block, .msg

Здесь свойство background применяется одновременно к элементу и к классам block и msg .

Дерево документа

Большинство комбинаций селекторов основано на их положении в дереве документа и относительно друг друга. Дерево документа — это схематичное изображение всех элементов, встречающихся в нашем коде HTML. Для иллюстрации возьмём произвольный документ, показанный в примере 3.

Пример 3. Код HTML

Дерево документа для этого HTML показано на рис. 1. Схема напоминает крону дерева из-за своей схожести с ветвями и листьями.

Рис. 1. Дерево документа

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

, поскольку располагается внутри них. Родитель Непосредственный предок элемента, который располагается выше на один уровень в дереве документа. будет родителем для
, но уже не для
• , для него родителем будет выступать
  . Ребёнок (дочерний элемент) Непосредственный потомок элемента, который располагается ниже на один уровень в дереве документа. К примеру, дочерним для будет элемент

  ; для

  дочерними элементами выступают
  • , но не . У родителя может быть произвольное число дочерних элементов, но у дочернего элемента только единственный родитель. Братья (сиблинги) Элементы, расположенные на одной ветке и имеющие общего родителя, называются братскими или сиблинги, если пользоваться термином из генетики. Братскими являются элементы , и , а также
  • . Элементы братскими не являются из-за того, что у них разные родители. Смежные Братские элементы, расположенные рядом друг с другом. Смежными будут элементы и , а также и , но никак не и , потому что они располагаются «через одного».

  Селекторы потомка (A B)

  Эти селекторы также называются вложенными или контекстными. Такие селекторы состоят из базовых селекторов разделённых пробелом.

  footer a

  Пример 4. Цвет ссылок

  Результат данного примера показан на рис. 2. Для изменения цвета ссылок вверху мы использовали селектор header a , а для ссылок внизу — footer a .

  

  Рис. 2. Ссылки разного цвета

  Селекторов не обязательно должно быть только два, можно комбинировать произвольное количество.

  .tbl thead td

  Дочерние селекторы (A > B)

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

  section > h2

  Данная запись означает применить стиль к элементу , который является дочерним по отношению к . Для следующего фрагмента HTML красным цветом будет оформлен первый заголовок , поскольку только он непосредственно располагается внутри и выступает его дочерним элементом.

   
  Заголовок 1
   
  Заголовок 2
   
   

  располагается внутри другого. Чтобы стилизовать пункты списка первого уровня, не затрагивая остальные, и требуются дочерние селекторы.

  Пример 5. Дочерние селекторы

  Результат данного примера показан на рис. 3.

  

  Рис. 3. Изменение стиля дочерних элементов

  Смежные селекторы (A + B)

  Выбирает элемент B, который является смежным для элемента A, иными словами, идёт в коде сразу же после него. К примеру, следующая запись изменит цвет только первого абзаца после заголовка.

  h2 + p

  Смежные селекторы обычно применяются для стилизации полей формы или создания разных эффектов. В примере 6 текстовый абзац с классом hidden прячется с помощью свойства display со значением none . При наведении курсора мыши на абзац с классом more смежный с ним абзац с классом hidden становится виден. Подробнее об использовании :hover говорится в разделе про псевдоклассы.

  Пример 6. Смежные элементы

  Братские селекторы (A ~ B)

  Выбирает все братские элементы B, которые идут в коде после элемента A. К примеру, следующая запись изменит цвет всех абзацев после заголовка.

  h2 ~ p

  В примере 7 при наведении курсора мыши на любую звёздочку, все остальные, которые располагаются правее неё, меняют цвет с серого на красный. Поскольку братские селекторы работают только для элементов справа, а не слева от указанного, то мы идём на хитрость и переворачиваем все звёздочки с помощью атрибута dir со значением rtl . Это меняет текст и расположение элементов справа налево.

  Пример 7. Братские селекторы

  Результат данного примера показан на рис. 4.

  

  Рис. 4. Использование братского селектора

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

  Перечисление селекторов

  Пишем сразу несколько селекторов, к которым будут применяться стили.

  Время чтения: меньше 5 мин

  Открыть/закрыть навигацию по статье
  Контрибьюторы:

  Обновлено 9 мая 2023

  Кратко

  Скопировать ссылку «Кратко» Скопировано

  При помощи перечисления нескольких селекторов через запятую можно избежать дублирования кода.

  �� Если у нескольких элементов есть определённые повторяющиеся стили, то вполне допустимо вынести эти стили в отдельный блок и в качестве селектора указать несколько классов (или тегов, или идентификаторов), перечислив их через запятую.

  Пример

  Скопировать ссылку «Пример» Скопировано

  Представим, что у всех заголовков на странице одинаковый цвет текста, высота строки и есть декоративный элемент в виде подчёркивания.

     
  Только хорошие новости 
  Учёные научились выращивать зубы 
  Группа специалистов впервые сумела вырастить настоящий зуб .
     div class="wrapper"> h1 class="main-title">Только хорошие новостиh1> h2 class="title">Учёные научились выращивать зубыh2> p class="text">Группа специалистов впервые сумела вырастить настоящий зуб . p> div>    Скопировать Скопировано Не удалось скопировать   

  Задаём общие стили для заголовков. Ниже создаём одинаковые декоративные подчёркивания при помощи псевдоэлементов.

   .main-title,.title  position: relative; display: inline-block; color: #ffffff; font-weight: 500;> .main-title::before,.title::before  content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; border-radius: 3px; background-color: #FFFFFF; z-index: -1;> .main-title, .title  position: relative; display: inline-block; color: #ffffff; font-weight: 500; > .main-title::before, .title::before  content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; border-radius: 3px; background-color: #FFFFFF; z-index: -1; >    Скопировать Скопировано Не удалось скопировать   

  Как понять

  Скопировать ссылку «Как понять» Скопировано

  �� Перечисляемые через запятую селекторы могут быть никак не связаны между собой родственными связями, могут находиться в разных частях разметки или вообще на разных страницах. Стили, описанные внутри фигурных скобок, будут в равной степени применены и к первому, и ко второму, и ко всем последующим селекторам.

  Как пишется

  Скопировать ссылку «Как пишется» Скопировано

  Указывается один селектор, после него ставится запятая, через пробел указывается второй селектор и так далее.

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

  Селекторами может быть не только селектор по классу, но и селектор по тегу или по идентификатору, или даже их комбинация.

  Подсказки

  Скопировать ссылку «Подсказки» Скопировано

  �� Если стили у перечисляемых блоков не отличаются ничем, то это причина пересмотреть разметку и задать одинаковым по стилям элементам одинаковый класс.

  �� Если перечисляете через запятую составные селекторы, то нужно указывать их полностью.

  На практике

  Скопировать ссылку «На практике» Скопировано

  Алёна Батицкая советует

  Скопировать ссылку «Алёна Батицкая советует» Скопировано

  �� Начинающие разработчики часто допускают ошибку при перечислении селекторов: по их логике первая часть составного селектора не требует повторения и её можно указать один раз в начале, а затем перечислить через запятую несколько «вторых» частей составного селектора.

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

  Вот так неверно:

   .parent-class .child-class,.another-class,.one-another-class  /* Стили */> .parent-class .child-class, .another-class, .one-another-class  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

  А вот так верно! Все три перечисленных селектора являются вложенными:

   .parent-class .child-class,.parent-class .another-class,.parent-class .one-another-class  /* Стили */> .parent-class .child-class, .parent-class .another-class, .parent-class .one-another-class  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

  По факту, перечисление через запятую — просто удобный способ сокращения кода, что вписывается в рамки принципа DRY.

  �� Не злоупотребляйте перечислением селекторов через запятую. Особенно составных. Если в стилях слишком много перечислений селекторов, присмотритесь к одной из методологий написания CSS — например, БЭМ ��

  Используем два класса

  Общее оформление для всех преимуществ готово, теперь надо «раскидать» их по тарифам.

  Вспомните, как мы отделили элементы-преимущества от обычных элементов. Мы добавили им класс, который говорит, что перед нами преимущество ( advantages-item ). Можем ли мы некоторым преимуществам добавить ещё один класс, который привяжет их к какому-то тарифу и отделит их от других преимуществ? Можем, и тогда у одного элемента будет сразу два класса.

  На самом деле у HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:

  Использование нескольких классов — это типовой приём, который ещё называется миксованием классов. Обычно его используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации. В примере выше размеры карточек товаров можно описать в CSS-правиле .product , а особый фон для хита продаж — в правиле .hit . В общем, удобный приём, помогает сократить дублирование кода.

  Осталось придумать наши классы для тарифов. Для эконом-тарифа дополнительный класс вводить не будем, для стандартного тарифа используем класс standard , а для вип-тарифа — vip . Всё, можно дорабатывать разметку.

  Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  Gloevk

  Разнообразные товары для дома с доставкой по всей планете