Menu
Coddy logo textTech

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

Урок 4 из 15 курса Селекторы CSS на Coddy.

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

Чтобы выбрать элементы с определенным классом, используется точка (.), за которой следует имя класса. Например, селектор .my-class выбирает все элементы, имеющие класс my-class.

Вот пример того, как использовать селектор класса для стилизации веб-страницы:

.my-class {
  color: red;
  font-size: 2em;
}

Чтобы добавить класс к элементу, напишите:

<div class="my-class"></div>

Это CSS-правило применит к элементам с классом my-class красный цвет и размер шрифта 2em.

challenge icon

Задание

Легко
  • Создайте веб-страницу с тремя элементами h1.
  • Добавьте класс к первому элементу h1.
  • Добавьте другой класс ко второму элементу h1.
  • Используйте селектор класса CSS, чтобы задать первому элементу h1 цвет red  и размер шрифта 64px.
  • Используйте другой селектор класса CSS, чтобы задать другому элементу h1 цвет blue  и размер шрифта 32px.

Попробуйте сами

<html>
<head>
  <title>Class Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  
</body>
</html>

Все уроки раздела Селекторы CSS