Контекстные селекторы класса
Если требуется применить правило только к одному абзацу класса, следует создать селектор, сочетающий нужный тег и класс:
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
p.specialtext {color:red;}
Это еще одна разновидность контекстного селектора, так как класс должен быть в контексте абзаца, чтобы правило было применено.
Можно сделать еще один шаг и написать такое правило:
р {font-family: Helvetica, sans-serif;}
.specialtext (font-weight:bold;}
p.specialtext {color:red;}
p.specialtext span {font-style:italic;}
Слово regardless выделено жирным и курсивом, так как находится внутри тега span, расположенного в абзаце с классом specialtext. Если теперь потребуется создать правило для применения к span внутри тега h1, можно изменить его двумя способами. Самое простое - не связывать класс с каким-то определенным тегом.
.specialtext span {font-style:italic}
Теперь слова same и class в заголовке также выделены курсивом. Удалив р из селектора, мы отказались от требования, чтобы класс был прикреплен к определенному тегу, поэтом теперь правило действует для обоих тегов span. Согласно этому правилу, тег span может быть потомком любого тега с классом specialtexte.
Преимуществом данного подхода является возможность использовать класс вне зависимости от тега, к которому он прикреплен, избегая таким образом ограничений наследуемости иерархии.
Недостатком данного метода является возможность применения стиля и к другим ненужным тегам, так как это правило является менее конкретным. То есть, если впоследствии вы добавите span внутрь другого тега с классом specialtext, например:
<div class="specialtext">In this div, the span tag <span>may or may not</span> be styled.</div>
текст внутри span будет также выделен курсивом, что может оказаться и нежелательным.
Если вы не хотите добавлять стиль к новому тегу, можно использовать второй, более точный подход:
p.specialtext span, h1 .specialtext span {font-style:italic}
Теперь правило действует только на два нужных тега, а на новый не распространяется. Возможно, вам это покажется слишком сложным всего для четырех строк текста, однако такие приемы, несомненно, могут понадобиться вам при работе с полноценной страницей и таблицей стилей.