Добрый день.
Хочу поделиться с хабрасообществом одним полезным свойством, которое не так часто используется, хотя при грамотном использовании способно сократить размер css и html кода. Речь идет о возможности прописывать css-свойства для элементов с несколькими селекторами, указанными одновременно.
Делается это достаточно просто — нужно перечислить селекторы подряд, без пробелов (с пробелом, как известно, получится селектор потомка).
Аналогично можно задавать стилевые описания для любого количества селекторов классов одновременно. Например, запись
будет применяться только к тем элементам, у которых указаны три класса одновременно.
Кроме этого, можно комбинировать селекторы классов с селекторами идентификаторов #id:
и с селекторами атрибутов:
Иногда приходилось видеть, как для реализации подобной функциональности добавлялись лишние структурные блоки и уже для них, как потомков, прописывались отдельные css-правила. Как видите, этого можно достаточно просто избежать, сохранив разметку чистой, а волосы — мягкими и шелковистыми :)
Вот и все, надеюсь, кто-то найдет это полезным.
Хочу поделиться с хабрасообществом одним полезным свойством, которое не так часто используется, хотя при грамотном использовании способно сократить размер css и html кода. Речь идет о возможности прописывать css-свойства для элементов с несколькими селекторами, указанными одновременно.
Делается это достаточно просто — нужно перечислить селекторы подряд, без пробелов (с пробелом, как известно, получится селектор потомка).
<style>
.red_bg { background: #f00; }
.red_text { color: #f00; }
.red_bg.red_text { color: #fff; } /* это правило будет применяться, когда
указаны одновременно оба предыдущих класса */
</style>
<div class="red_bg">
это текст на красном фоне
</div>
<div class="red_text">
это красный текст
</div>
<div class="red_bg red_text">
на красном фоне текст стал белым
</div>
Аналогично можно задавать стилевые описания для любого количества селекторов классов одновременно. Например, запись
<style type="text/css">
.red_bg.red_text.bordered { ... }
</style>
будет применяться только к тем элементам, у которых указаны три класса одновременно.
Кроме этого, можно комбинировать селекторы классов с селекторами идентификаторов #id:
<style type="text/css">
#menu.red_text { ... } /* обычно class="red_text" делает одно,
а для #menu этот же класс может добавлять другое описание */
</style>
и с селекторами атрибутов:
<style type="text/css">
h1 { background: #000; color: #fff; }
.notice { color: #00f; }
h1.notice { color: #ee8; }
</style>
<p class="notice">Текст в блоке с class="notice" синий.</p>
<h1>Заголовок первого уровня - белый на черном фоне</h1>
<h1 class="notice">Заголовок первого уровня с class="notice" становится светлым,
т.к. синий на черном не читается</h1>
Иногда приходилось видеть, как для реализации подобной функциональности добавлялись лишние структурные блоки и уже для них, как потомков, прописывались отдельные css-правила. Как видите, этого можно достаточно просто избежать, сохранив разметку чистой, а волосы — мягкими и шелковистыми :)
Вот и все, надеюсь, кто-то найдет это полезным.