Селектор класса
Селектор класса
«Селектор класса» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.
Зачем использовать селекторы классов
Здравствуйте!
Мы перешли к селекторам классов — одной из важнейших тем в CSS.
С селектором классов мы уже знакомы, поскольку часто использовали его до этого.
В этом уроке давайте одновременно закрепим наши знания и узнаем о преимуществах этого селектора по сравнению с другими.
Синтаксис селектора класса
Итак, начнём.
Для определения селектора класса мы используем селектор с точкой (.). Ниже приведён селектор класса с именем my-class, которому передано значение стиля font-size: 10px.
.my-class {
font-size: 10px;
}
Для селектора класса также можно определить несколько стилей.
.my-class {
font-size: 10px;
}
Несколько селекторов
Одному элементу можно назначить несколько классов.
В примере ниже определены два селектора классов с именами el1 и el2.
В атрибут class элемента, созданного с помощью тега p, можно добавить два или более класса, разделив их пробелом.
В разделе предварительного просмотра видно, что стили обоих классов одновременно применяются к элементу.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Почему следует выбрать селектор класса, а не селектор тега или идентификатора?
Почему следует выбрать селектор класса, а не селектор тега или идентификатора?
Использование селектора тега может привести к нежелательным результатам, поскольку он затрагивает все элементы, созданные с этим тегом. Поэтому обычно мы используем такие теги, если все элементы должны обладать общим свойством.
Например, если мы хотим, чтобы для каждого элемента использовалось семейство шрифтов «Lato», мы задаём определение следующим образом.
a{
font-family: Lato,sans-serif
}Почему следует выбрать селектор класса, а не селектор тега или идентификатора? 2
С помощью селектора идентификатора мы могли бы задать определение, предназначенное для конкретного элемента.
Однако, поскольку каждое наше определение стиля применимо только к одному элементу, для другого элемента, которому мы хотели присвоить те же свойства, пришлось бы заново писать код.
Это связано с тем, что в HTML-документе может быть только один элемент с одним и тем же идентификатором.
Приоритет селекторов CSS
Теперь изучим понятие приоритета селекторов CSS.
Чтобы лучше понять тему, снова создадим задачу и разберём это понятие в процессе её решения.
Приоритет селекторов CSS 2
В примере ниже
для тега p задано определение стиля.
Также задано определение стиля с помощью селектора класса с именем .first.
Оба селектора выбрали один и тот же элемент в нашем HTML-документе.
Оба селектора определяют стили, изменяющие одно и то же свойство цвета. В этом случае возникает конфликт.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
Приоритет селекторов CSS 3
Глядя на пример, мы можем предположить, основываясь на предыдущих знаниях, что цвет будет красным.
Ведь понятие каскадности говорит нам, что побеждает последнее определение в порядке расположения кода.
Однако есть небольшой нюанс. Если специфичность селекторов одинакова, побеждает код, расположенный последним.
Это оценка, которая показывает важность специфичности селектора для соответствующего элемента или элементов.
Селектор с высокой специфичностью будет обработан браузером независимо от его положения в коде.
Предупреждение
Селектор класса является более конкретным определением, чем селектор элемента. Поэтому его приоритет выше.
Приоритет селекторов
Определить, какой селектор является более конкретным, на самом деле очень просто.
Поскольку элементу назначается только один идентификатор и на веб-странице он также должен быть уникальным, мы ожидаем, что селектор идентификатора будет иметь наивысший приоритет.
Селекторы класса, в свою очередь, могут иметь более высокий приоритет, чем селекторы тегов, поскольку выбирают более конкретную группу, чем тег.
В примере ниже мы увидим, что селектор идентификатора побеждает: один и тот же элемент выбирается с помощью трёх разных селекторов.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Инструмент для расчёта приоритета селекторов
Онлайн-калькулятор приоритета селекторов доступен по этой ссылке.
Когда важен приоритет селекторов
Значит, мне нужно постоянно выполнять эти расчёты?
Конечно, нет. Если писать код в соответствии со стандартами, конфликтов не возникнет.
Поэтому не нужно постоянно выполнять математические расчёты, но при возникновении проблемы эта информация может понадобиться для её решения.
Поздравляем
Поздравляем! 🥳🥳🥳
Вы завершили урок «Селектор класса и специфичность CSS».
В следующем разделе мы изучим типы селекторов.
Нажмите, чтобы продолжить и перейти к следующему разделу.
Часто задаваемые вопросы
Урок «Селектор класса» бесплатный?
Да — полный текст урока «Селектор класса» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 1 уроков всего.
Чему я научусь в уроке «Селектор класса»?
Селектор класса Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Селектор класса»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.