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

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

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

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

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

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

.bold {
    font-weight: 900;
}

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

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

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

span.bold {
    font-weight: 900;
    color: #888888;
}

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

span.bold {
    color: #888888;
}
p.bold {
    color: #DD4455;
}

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

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

.bold {
    color: red;
}
span.bold {
    font-weight: bold;
}

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

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

.bold {
    color: red;
}
span.bold {
    color: blue;
}

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

Похожие уроки Codebra

1. Исправьте CSS код так, чтобы цвет выделенного текста был красный и текст был без подчеркивания (сейчас цвет текста синий). Вы можете удалять лишние строки, но нельзя дописывать новые селекторы и свойства

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.