Селекторы css

Основные Селекторы — Basic Selectors

Базовые селекторы CSS выбирают элементы HTML в соответствии с их идентификатором, классом, типом или выбирают все элементы на веб-странице.

Type Селектор или Селектор Элементов CSS

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

CSS

Copy

HTML Example

Copy

ID Селектор

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

CSS

Copy

HTML Example

Copy

Class Селектор

Селектор классов сопоставляет HTML-элементы с определенным атрибутом . Вы можете использовать атрибут для всех элементов HTML, допустимых в разделе документа HTML, включая сам элемент . Чтобы выбрать элементы с определенным классом, напишите символ точки (.), а затем имя класса. Например, если мы хотим, чтобы все элементы с классом «main» имели разные цвет фона, цвет текста и размер шрифта, мы должны использовать следующее правило CSS:

CSS

Copy

HTML Example

Copy

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

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

CSS

Copy

HTML Example

Copy

Простые CSS селекторы

Селекторы позволяют нацеливаться и выбирать определённые части HTML документа для стилизации.

Простые CSS селекторы напрямую выбирают один или несколько элементов:

• С помощью универсального селектора .
• На основе имени/типа элемента.
• На основе значения класса элемента.
• На основе значения идентификатора элемента.

Изучив, как работают самые просты селекторы, вы сможете понять, как использовать более сложные. Простые CSS селекторы чаще всего используются.

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

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

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

CSS селектор типа

Селектор типа выбирает все HTML элементы указанного типа. Для его использования, укажите имя элемента. Например, если вы хотите применить стиль к каждому параграфу HTML-элемента, вы должны указать элемент :

Приведённый выше код сопоставит и выберет все элементы в документе, и стилизует их.

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

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

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

Классы можно использовать повторно, что делает их хорошим вариантом практики DRY-разработки. DRY — это принцип разработки, сокращение от ‘Don’t Repeat Yourself (Не повторяйся). Как следует из названия, цель состоит в том, чтобы по возможности избегать написания повторяющегося кода.

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

В приведённом выше коде элементы с классом выбираются и оформляются соответствующим образом.

CSS селектор идентификатора

Селектор идентификатора выбирает HTML элемент на основе значения его атрибута .

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

Чтобы выбрать элемент с определённым идентификатором, используйте символ , за которым следует имя идентификатора:

Приведённый выше код будет соответствовать только уникальному элементу со значением идентификатора .

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

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

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

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

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

Приведенный выше пример выбирает все дочерние элементы (включая глубоко вложенные элементы) от элементов . Еще один более сложный пример может выглядеть так:

В приведенном выше примере я выбираю все элементы span, которые находятся внутри любого элемента, являющегося потомком элементов <footer>. Правда такие решения встречаются очень редко, но хотябы будите знать что так можно делать.

Взаимоотношения между селекторами CSS

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

1. Контекстные селекторы
— выбор элементов потомков селектор селектор { } (между селекторами ставят пробел).
2. Дочерние селекторы
— выбор дочерних элементов селектор > селектор { } (между селекторами ставят знак больше).
3. Соседние селекторы
— выбор соседних (братских, сестринских) элементов селектор + селектор { } (между селекторами ставят знак плюс).

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

Общие смежные селекторы

Общий смежный селектор похож на предыдущий (), но он менее строг. Он так же состоит из двух простых селекторов, но разделенных символом тильды (). Запись может иметь вид: , где является целью селектора.

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

По сути, отличается от , тем, что выберет все после , а выберет только первый элемент .

Есть более сложные селекторы, такие как селекторы атрибутов, псевдоклассы, псевдоэлементы. Мы подробно обсудим эти селекторы в следующих главах.

Селектор по тегу

Селектор по тегу определяет стиль всех элементов страницы, созданных определённым тегом. Например, для всех
тегов <h1> или для всех тегов <p>.
Для создания этого селектора указывается имя тега без скобок.

Для примера создадим страницу и добавим на неё заголовок.
Стиль будем задавать через тег <style>. Укажем в нём стиль для
заголовков первого уровня.

<!DOCTYPE html>
<html>
<head>
<title>Селекторы</title>
<meta charset="utf-8">
<style>
h1 
  {
  font-size: 15px;
  color: Red;
  }
</style>
</head>
<body>
<h1>Стиль по тэгу</h1>
</body>
</html>

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

Псевдоэлементы

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

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

Синтаксис псевдоэлементов такой же, как и у псевдоклассов:

Селектор:псевдоэлемент
{ свойство1
: значение
; свойство2
: значение
; … }

Селектор в CSS — это указатель
на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:

1. Селекторы по тэгам
: h1

2. Селектор по id
: #main

3. Селекторы по классам
: .hidden

4. Селектор по нескольким классам

Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс.hidden и класс.closed .

Hidden.closed

5. Контекстные селекторы

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

P
strong

ul
.selected

.header
.menu
a

6. Соседние селекторы

Выделяет последующий элемент. Записываются с помощью знака + . Читается как: применить свойства к селектор2 который должен быть сразу после
селектор1 .

Стили применяются к элементу, подходящему под селектор2 , только если перед ним расположен элемент, подходящий под селектор1 .

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Статья взята с сайта: https://site-on.net/

Селектор по вложенным потомкам

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

Например, следующий код CSS выбирает все элементы ссылок, являющихся потомками элементов абзацев:

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

Особенности селекторов по идентификатору

Селекторы по id или по идентификатору более специфичны, чем по классу и по атрибуту. То есть при использовании в каскаде они будут «перевешивать» остальные подобные селекторы. Идентификаторы также помогают точно выбрать определенный элемент в коде, но их использование при оформлении страниц считается плохой практикой среди верстальщиков. Только в очень редких случаях, например при создании слайдера на CSS, такая практика допустима. Дело в том, что в пределах одной страницы может быть только один элемент с определенным id. Следовательно, из-за уникальности селектора CSS по id он может использоваться только для одного-единственного элемента. В этом случае намного логичнее использовать классы, а не идентификаторы.

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Combination Selectors

The real power of CSS selectors comes in your ability to combine selectors together. There are 6 main combination selectors you need to know which will allow you to select the exact element you want every time.

Descendant Selector

The first type of combination selector is the descendant selector. This selector allows you to select any element that matches a specific selector which is a descendant of an element that matches a different selector. Let’s take a look at a quick example.

The above CSS selector selects all span elements that are descendants of a div element. You will notice that this means the first span is selected since it is a direct child of the div. The second span is also selected since while it is not a direct child of a div it is a descendant of a div. The final span is not selected, though, since it is not inside a div.

Now in order to use a descendant selector all you need to do is separate two selectors by a space. The first selector will be the parent selector and the second selector will be the selector for the descendants.

Direct Child Selector

Similar to the descendant selector, the direct child selector is for selecting child elements, but the main difference is the direct child selector will only select an element that is the direct child of the first parent selector.

As you can see above the span inside the a tag is not selected since it is not a direct child of the div and instead is a direct child of an a tag. The first span is selected, though, since it is the direct child of a div.

In order to use a direct child selector just put a greater than symbol between the first selector and the second selector.

General Sibling Selector

This next selector is all about selecting siblings, but can be a bit confusing. Let’s take a look at an example and I will explain what I mean.

You would think since this selector is called the general sibling selector that it would select all elements that are siblings of the first element, but it actually only selects the siblings that come after the first selector. This is because CSS can only read in one direction so has no way to modify elements that come before other elements.

As for the actual selector itself all you need to do is put a between the selectors. The first selector will be for the sibling to check after and the second selector is for the actual siblings you are checking for.

Adjacent Sibling Selector

Similar to the general sibling selector the adjacent sibling selector is for selecting siblings, but this selector can only select the element that comes direct after the first element.

As you can see above the only a tag that is selected is the one directly after the div. It is also important to note that if the sibling directly after the div was something other than an a tag then the selector we have written would do nothing since it can only select the element that is the first element after the div.

To use this selector just put a between the first and second selector.

Or Selector

Now we are coming to my two favorite combination selectors, the or and and selectors. First we will talk about the or selector which is a way to write a CSS selector that will select elements that match at least one of the selectors.

The above selector selects all elements that are either a div or a span. This is great if you want to have multiple selectors do the same thing. To use the or selector just separate your selectors by a comma. Generally, if the selectors are long I will separate them onto different lines to make them easier to read.

And Selector

The final combination selector is the and selector and it is probably the most used combination selector. This selector allows you to write CSS selectors that force elements to match all the selectors specified.

As you can see only the div with the class of red is selected in the above example. Using the and combination selector is also incredibly easy since all you have to do is write all the selectors right next to each other with no spacing between them.

The only important thing to know about this selector is that if you are using a universal selector or a type selector then you must put the type/universal selector first.

Combination Selector Important Notes

The important thing to know about these combination selectors is that you can utilize any of the selectors we talk about in combination with each other even other combination selectors.

For example, in the above selector we combined together multiple type and class selectors using direct child combinations with and combinations. This ability to combine together infinitely many selector combinations is what makes CSS so flexible.

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div id="first">текст в первом диве</div>
<div class="second">текст во втором диве</div>
<div id="third" class="first second third">текст в третьем диве</div>

На что стоит обратить внимание:

• Классы и идентификаторы можно присваивать любым (всем) тегам.
• Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
• Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
• Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
• Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div id="first" class="blue">текст в диве</div>

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

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

.myclass {свойства} <span class="code-comm">/* применятся ко всем тегам, которые содержат класс myclass */</span>
div.myclass {свойства} <span class="code-comm">/* применятся только к тегам div, которые содержат класс myclass */</span>

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} <span class="code-comm">/* правильно */</span>
div#super {свойства} <span class="code-comm">/* Неправильно, но работать будет */</span>
</style>
<div id="super">текст</div>

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

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

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

Комбинаторы позволяют объединять два HTML элемента на основе отношений между ними и их расположением в HTML документе. По сути, вы можете комбинировать два простых селектора таким образом, чтобы объяснить взаимосвязь между этими CSS селекторами. Комбинаторы — это тип CSS селектора, который определяет и описывает взаимосвязь между двумя селекторами.

Существует четыре типа комбинаторов:

• Комбинатор потомков .
• Прямой дочерний комбинатор .
• Общий родственный комбинатор .
• Соседний родственный комбинатор .

Комбинатор потомков

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

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

В качестве примера возьмём следующее:

В приведённом выше примере HTML документа является родительским элементом, а , , и два — дочерними элементами, поскольку они находятся внутри . Существует также вне .

Если вы хотите стилизовать только те , которые находятся внутри , вот что вы должны сделать:

В приведённом выше примере стилизуются только два с текстом I am a paragraph inside a div внутри блока . Два других дочерних элемента и абзац вне с текстом I am a paragraph outside a div не стилизуются.

Прямой дочерний комбинатор

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

В качестве примера возьмём следующий HTML документ:

У нас есть являющийся родительским элементом. Внутри родительского HTML элемента есть два элемента являющиеся прямыми дочерними элементами элемента .

Также есть ещё один элемент внутри элемента . Элемент является дочерним элементом , но элемент внутри параграфа не является прямым дочерним элементом .

Итак, чтобы получить доступ только к элементам , которые являются прямыми дочерними элементами , вы должны сделать следующее:

Приведённый выше код выбирает элементы , непосредственно вложенные в и являющиеся его непосредственными дочерними элементами.

Общий родственный комбинатор

Общий родственный комбинатор выбирает родственные элементы.

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

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

В качестве примера возьмём следующее:

Внутри элемента есть вложенный элемент . Этот конкретный элемент является дочерним элементом . Также есть два параграфа с текстом I am a paragraph outside a div и элемент . Все эти три элемента (, и ) являются родственными элементами элемента (находятся с ним на одном уровне вложенности).

Чтобы выбрать элемента являющиеся родственными элементу , вы должны сделать следующее:

Приведённый выше код стилизует оба элемента , идущие после . Он стилизует даже элемент , который не следует непосредственно за элементом , например, элемент следующий за элементом . Это происходит потому, что он всё ещё идёт после .

Соседний родственный комбинатор

Соседний родственный комбинатор является более конкретным, чем общий родственный комбинатор. Этот селектор соответствует только непосредственным родственным элементам. Непосредственные родственные элементы — это HTML элементы идущие сразу за первым элементом.

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

Вернёмся к примеру из предыдущего раздела:

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

Таким образом, чтобы настроить таргетинг только на HTML элемент идущий сразу за , вы должны сделать следующее:

Несколько правил стиля

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

H1 {
color: #00CED1;
letter-spacing: .2em;
text-transform: lowercase;
margin-bottom: 2em;
font-weight: 700;
}

Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

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

Классовый селектор – самый часто используемый и полезный тип селекторов в CSS. Он объявляется с помощью точки (.) и названия, которое должно существовать в атрибуте class в вашем HTML.

Например, у вас может быть следующий HTML-код:

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

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

Классовый селектор является основой для методологий CSS, таких как OOCSS, BEM и SMACSS. Этот тип селекторов также является основой для популярных фреймворков CSS, таких как Bootstrap и Tailwind.

С помощью классового селектора вы можете создавать атомарные стили. Эти типы стилей, часто называемые классами одного назначения, являются многоразовыми и могут служить строительными блоками для сложных проектов CSS. Количество имен классов, которые можно включить в один атрибут class HTML, практически неограничено. Таким образом, классовый селектор является мощной основой для многих современных фреймворков.

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