Какой из селекторов является селектором по классу

Селекторы классов и идентификаторов

Ранее мы уже рассматривали HTML селекторы, которые представляют теги HTML. Однако кроме этого есть возможность также определять селекторы классов и идентификаторов. Преимущества подобных селекторов состоит в том, что можно иметь одни и те же элементы HTML, но применять к ним разные стили в зависимости от их класса или идентификатора.

CSS селектор класса определяется при помощи произвольного имени, перед которым ставится точка (.), а селектор идентификатора — при помощи произвольного имени, перед которым ставится символ решетки (#).

Таким образом, декларация CSS может выглядеть следующим образом:

 #top < background-color: #ccc; padding: 1em >.intro

HTML элементы связываются с такими селекторами CSS при помощи атрибутов class и id. Выглядит это следующим образом:

  Шоколадное карри
 Это мой рецепт карри из одного шоколада
 Ммм мм ммммм

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

Также можно определять селектор CSS для конкретного элемента HTML поместив перед именем класса HTML селектор, так p.jam определит стиль для элементов параграфов, у которых класс «jam».

Селектор по классу

Удобный способ выбрать из HTML-разметки элементы только с нужным классом. И применить к ним стили.

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

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

Обновлено 20 декабря 2021

Кратко

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

Селектор по классу находит элемент на странице по значению атрибута class .

Пример

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

 Нобелевская премия по физике 2020 годаШнобелевская премия 2020 h2 class="article-title">Нобелевская премия по физике 2020 годаh2> h3 class="article-title">Шнобелевская премия 2020h3>

Селектор ниже найдёт все элементы, значение атрибута class которых равно article — title .

 .article-title  margin-bottom: 1.6em;> .article-title  margin-bottom: 1.6em; >

Как пишется

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

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

Вот так сработает:

 .class-value  color: red;> .class-value  color: red; >

А вот так не сработает:

 class-value  color: red;> class-value  color: red; >

Стиль применится ко всем элементам с атрибутом class = «article — title» .

 .article-title  margin-bottom: 1.6em;> .article-title  margin-bottom: 1.6em; >

Стиль применится ко всем заголовкам с атрибутом class = «article — title» .

 h2.article-title  margin-bottom: 1.6em;> h2.article-title  margin-bottom: 1.6em; >

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

 h2.article-title.title-primary  text-decoration: underline;> h2.article-title.title-primary  text-decoration: underline; >

Обратите внимание: селектор .article — title эквивалентен селектору по атрибуту [class ~ = «article — title» ] .

Подсказки

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

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

 Зима пробуждает аппетит.
 Зима пробуждает аппетит.
 Зима пробуждает аппетит.
  blockquote class="color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит. blockquote> blockquote class="author" cite="Эрих Мария Ремарк">Зима пробуждает аппетит. blockquote> blockquote class="author color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит. blockquote>

 blockquote  position: relative; background-color: white; color: #123E66;> blockquote  position: relative; background-color: white; color: #123E66; >

Если цитате добавить класс .color , то фоновый цвет сменится на голубой:

 .color  background-color: blue; color: black;> .color  background-color: blue; color: black; >

Если элементу добавить класс .author , то перед текстом цитаты будет декоративная кавычка, а после — имя автора:

 .author::before  content: "“"; position: absolute;> .author::after  content: attr(cite); display: block; font-style: italic;> .author::before  content: "“"; position: absolute; > .author::after  content: attr(cite); display: block; font-style: italic; >

На практике

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

Денис Ежков советует

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

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

Например, мы можем уточнить один селектор по классу другим:

   Ваш email  form> label class="form-label invalid" for="input">Ваш emaillabel> input class="form-input invalid" type="email" id="input"> form>

 .form-label.invalid  color: pink;> .form-input.invalid  border-color: pink; background-color: #623D45;> .form-label.invalid  color: pink; > .form-input.invalid  border-color: pink; background-color: #623D45; >

А можем добавить класс родительскому элементу, чуть изменить селекторы и получить тот же результат:

   Ваш email  form class="invalid"> label class="form-label" for="input">Ваш emaillabel> input class="form-input" type="email" id="input"> form>

 .invalid .form-label  color: pink;> .invalid .form-input  border-color: pink; background-color: #623D45;> .invalid .form-label  color: pink; > .invalid .form-input  border-color: pink; background-color: #623D45; >

Самое сложное в вёрстке — выбрать способ решения задачи, потому что любая задача решается двумя и более способами ��

Селекторы типа, класса и 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 это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

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

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

В этом модуле

Каскад и наследование
Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
Модель коробки (The box model)
Фон и границы
Обработка разных направлений текста
Переполнение содержимого
Значения и единицы измерения
Изменение размеров в CSS
Элементы изображений, форм и медиа-элементы
Стилизация таблиц
Отладка CSS
Организация вашей CSS (en-US)

Found a content problem with this page?

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

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Часть 1. Селекторы CSS. Теги, классы, ID, группы

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

Селекторы тегов.
Селекторы классов.
Селекторы ID.
Селекторы групп.

1. Селекторы тегов

Если вам необходимо изменить внешний вид содержимого, которое находится в каком-либо теге, используйте CSS селекторы тегов. Допустим, вам нужно изменить шрифт и цвет всех тегов , которые имеются на веб-странице. Для этого вам понадобится создать стиль, где селектором будет h3 (обратите внимание: в CSS угловые скобки <> тега не записываются, а используется только его имя):

Написав один такой стиль, вы измените шрифт сразу для всех тегов на странице, сколько бы их ни было. Согласитесь, что это очень быстро и удобно. Аналогично можно создавать стили для других тегов, заменяя название селектора на нужное вам ( p , h1 , h2 , h3 и т. д.).

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

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

Итак, чуть выше мы применили стиль для всех тегов на веб-странице – текст имеет шрифт Geneva и оранжевый цвет. Но что делать, если вам понадобилось изменить цвет одного из тегов на зеленый? На помощь приходят селекторы классов. Всё что вам необходимо сделать, это создать стиль, где селектор – придуманное вами имя класса. Мы назовем класс greentext и запишем правило:

.greentext

Но это еще не всё. Теперь, чтобы изменить цвет для одного из тегов на странице, нужно отредактировать HTML-документ, применив класс greentext к необходимому нам тегу. Записывается это так:

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

Запомните несколько правил написания классов:

в CSS перед названием селектора класса обязательно ставится точка (но при присвоении класса в HTML-документе эта точка не нужна);
в названии классов можно использовать только буквы латинского алфавита, дефис, символ подчеркивания, цифры;
название класса всегда должно начинаться с буквы (правильные варианты названий: .intro , .img-border , .nav_menu_01 ; неправильные: .2color , .-link , ._divider );
названия классов CSS чувствительны к регистру, поэтому классы вроде .review и .Review будут восприниматься как два отдельных.

3. Селекторы ID

Идентификатор определяет уникальное название элемента. Записывается он почти так же, как и класс, только в CSS вместо точки ставится символ решетки # :

#footer

В HTML-документе идентификатор присваивается с помощью атрибута id :

Возможно, у вас возник вопрос: в чем разница между идентификатором и классом? Существует несколько отличий:

ID – это уникальное название элемента на веб-странице, которое должно встречаться на ней только один раз (например, шапка сайта и подвал: id=»header» и id=»footer» ), в то время как класс может присваиваться нескольким элементам с целью отличать их от остальных;
идентификаторы удобны для JavaScript-разработчиков, поскольку позволяют получить быстрый доступ к элементу DOM из скриптов (во многом именно поэтому необходимо, чтобы ID встречался на странице лишь один раз);
каждое правило CSS имеет свой так называемый вес (от веса зависит, какое из правил получит более высокий приоритет при выполнении). Идентификатор имеет больший вес, чем класс, поэтому, если элементу присвоен и ID, и класс, предпочтение отдается ID. Пример:

#text < color: yellow; >.content

4. Селекторы групп

Мы подошли к четвертому типу селекторов CSS – групповые селекторы. Представьте ситуацию, что вам необходимо сделать шрифт жирным для нескольких элементов веб-страницы – p , h1 , h2 , h3 . Можно было бы записать этот стиль отдельно для каждого элемента:

p < font-weight: bold; >h1 < font-weight: bold; >h2 < font-weight: bold; >h3

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

p, h1, h2, h3

Конечно, в перечислении могут участвовать не только селекторы тегов, но и классы, и идентификаторы.

А если по какой-то причине вам необходимо создать стиль абсолютно для всех элементов веб-страницы, можно воспользоваться универсальным селектором CSS, для обозначения которого используется символ звездочки * :

Выводы

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

Для изменения стиля содержимого тегов используйте селекторы тегов.

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

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

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

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

Читать:

Как востановить удаленные html файлы