Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

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

Мы использовали селекторы тегов в предыдущих уроках, на самом деле селекторы тегов не так часто применяются, как селекторы классов и идентификаторов. Классы и идентификаторы открывают большие возможности в CSS.

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

Приведу пример HTML кода, с которым будем работать (это будет "пример 1").

Пример 1
<p class = "bold">Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет оценить значение существенных финансовых и административных условий.</p>
<p>Не следует, однако забывать, что <span class = "bold">реализация намеченных плановых заданий</span> требуют от нас анализа соответствующий условий активизации.</p>

Класс bold мы присвоили двум элементам: первому абзацу и элементу span во втором абзаце. В CSS название селектора класса начинается с точки (.), поэтому наш селектор будет выглядеть так .bold.

Пример 2
.bold {
font-weight: 900;
}

Свойство font-weight отвечает за жирность шрифта, о нем еще поговорим в следующих уроках по CSS.

Результат примера 1 и 2
Результат примера 1 и 2

Теперь попробуем применить стили только для элемента span с классом bold. Чтобы стили применялись для элемента span с классом bold (<span class = "bold">...</span>). Обратите внимание на то, что между span и .bold нет пробела!

Пример 3
span.bold {
font-weight: 900;
color: #888888;
}

Проверьте пример и посмотрите результат.

Пример 4
span.bold {
color: #888888;
}
p.bold {
color: #DD4455;
}

В 4 примере для элемента span c классом bold мы делаем цвет текста красным, а для элемента p (абзац) с классом bold мы делаем цвет текста серый. Как видите, класс один, а элементы разные, мы просто их комбинируем.

Теперь сделаем для всех элементов с классом bold цвет текста красный, а для всех элементов span с классом bold жирное начертание. Смотрим на пример 5.

Пример 5
.bold {
color: red;
}
span.bold {
font-weight: bold;
}

В 5 примере мы комбинировали общий селектор (селектор тега, элемента) и селектор класса.

Рассмотрим 6 пример.

Пример 6
.bold {
color: red;
}
span.bold {
color: blue;
}

Вначале мы сделали для элементов с классом bold цвет текста «красный», а потом только для элемента span с классом bold сделали цвет текста «синий». Иногда такие комбинации уменьшают количество строк.

<
×
>
Курс «Селекторы в CSS»
Урок 1.1. Основные правила и знакомство с селекторами
Урок 2.1. Группировка селекторов в CSS
Урок 4.1. Несколько классов
Урок 5.1. Селекторы идентификаторов (id селекторы)
Урок 6.1. Селекторы атрибутов: простой выбор
Урок 7.1. Селекторы атрибутов: по конкретному значению
Урок 8.1. Селекторы атрибутов: по частичному значению
Урок 9.1. Селекторы атрибутов: по конкретному атрибуту
Урок 10.1. Структура документа: родитель-потомок в CSS
Урок 11.1. Структура документа: дочерние элементы в CSS
Урок 12.1. Структура документа: сестринские элементы в CSS
Урок 13.1. Псевдоклассы: ссылки
Урок 14.1. Псевдоклассы: первый дочерний элемент
Урок 15.1. Псевдоэлементы: первая буква и строка
Другие курсы
Курс 1. Знакомство с HTML
Курс 2. Разметка текста
Курс 3. Ссылки
Курс 4. Изображения
Курс 5. Таблицы
Курс 6. Формы
Курс 7. HTML5
Курс 8. Остальное
Курс 9. Знакомство с CSS
Курс 11. Структура и каскад
Курс 12. Единицы измерения
Курс 13. Шрифт
Курс 14. Свойства текста
Курс 15. Форматирование
Курс 16. Отступы, рамки, поля
Курс 17. Цвета и фон
Курс 18. Позиционирование
Курс 19. Верстка таблиц
Курс 20. Списки
Курс 21. Анимация
Курс 22. Практика с htmlbook.ru
Курс 23. Элементы сайта
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.