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

Самый распространенный способ применения стилей без учета элементов состоит в том, чтобы обратиться к селекторам классов. Однако сначала придется изменить разметку документа таким образом, чтобы обеспечить возможность работы селекторов класса. Введите атрибут class:

При работе с плутонием необходимо предпринять меры по недопущению достижения критической массы.


При работе с плутонием существует реальная
возможность взрыва, которую надо избежать любой ценой
.
Это может быть достигнуто путем разделения масс.



Чтобы связать стили селектора класса с элементом, необходимо присвоить соответствующее значение атрибуту class данного элемента. В предыдущем коде значение warning было присвоено двум элементам: первому абзацу и элементу span во втором абзаце. Вам всего лишь нужен способ применения стилей к этим элементам заданного класса. В HTM-документах возможна очень краткая запись, в которой имени класса предшествует точка (.), и оно может быть объединено с простым селектором:

*.warning {font-weight: bold;}

В сочетании с показанным ранее примером разметки применение этого простого правила приводит к результату.


Другими словами, стиль font-weight: bold будет применен ко всем элементам (благодаря наличию универсального селектора), атрибут class которых имеет значение warning. Как видите, селектор класса напрямую ссылается на значение, которое будет найдено в атрибуте class элемента. Перед этой ссылкой всегда ставится точка (.), которая отмечает ее как селектор класса. Точка помогает отделить селектор класса от всего, с чем он может быть объединен, например от селектора элемента. Скажем, вам захотелось выделять полужирным шрифтом текст только в том случае, если предупреждением является весь абзац:

p.warning {fontweight: bold;}

Теперь селектор выбирает только элементы p, у которых значение атрибута class равно warning, и игнорирует все другие элементы независимо от их класса. Селектор p.warning расшифровывается так: «Любой абзац, у которого значение атрибута class равно warning». Поскольку элемент span не является абзацем, селектор правила ему не соответствует, и текст не будет выделен полужирным шрифтом. Если бы вы действительно захотели назначить элементу span другие стили, вы могли бы использовать селектор span.warning:

p.warning {font-weight: bold;}
span.warning {font-style: italic;}

В этом случае абзац с предупреждением выделяется полужирным шрифтом, тогда как предупреждения фрагменты выделяются курсивом.


Каждое правило применяется только к определенному типу сочетания элемент/класс, и поэтому не распространяется на другие элементы. Другой вариант – комбинирование общего селектора классов и селектора классов, предназначенного для конкретного элемента, чтобы сделать стили еще более полезными, как в следующей разметке:

.warning {font-style: italic;}
span.warning {font-weight: bold;}

В данном случае любой текст предупреждения будет выделен курсивом, но только текст элементов span, значение атрибута class которых равно warning, будет выделен полужирным шрифтом и курсивом. Обратите внимание на формат универсального селектора классов в предыдущем примере: это просто имя класса, предваренное точкой, без указания какого-либо имени элемента. Если же требуется выбрать все элементы с одинаковым именем класса, то можно без вреда опускать в селекторе класса универсальный селектор.

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

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

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