Контекстные селекторы класса

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

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}

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




Rambler's Top100