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

До сих пор мы различными способами группировали селекторы и объявления, но используемые нами селекторы были простыми. Они обращались только к элементам документа, а это хорошо лишь до поры до времени: ведь бывают моменты, когда требуется что-то немного более специализированное. Кроме простых элементов документа есть еще два типа селекторов: селекторы классов (class selectors) и селекторы идентификаторов (ID selectors), позволяющие назначать стили независимо от элементов документа. Эти селекторы могут применяться самостоятельно или в сочетании с селекторами элементов. Однако работают они только в том случае, если документ размечен соответствующим образом, поэтому их применение подразумевает некоторое предварительное планирование и проработку.

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


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

p {font-weight: bold;}

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы