Атрибут class тега <s>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <s> для стилизации перечёркнутого текста. Классы могут использоваться многократно на странице.
<s class="discounted-price outdated">Старая цена: 100 руб.</s>
<style>
.discounted-price {
color: #999;
font-size: 0.9em;
}
.outdated {
text-decoration-style: double;
}
</style>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Множественные классы | Можно указать несколько классов через пробел |
| Специфичность | Селекторы класса имеют вес 0-1-0 в CSS |
| Наследование стилей | Стили применяются только к элементу <s> |
Типичные сценарии использования:
<!-- Ценник с акцией -->
<p>
<s class="old-price">2990 руб.</s>
<span class="new-price">1990 руб.</span>
</p>
<!-- Устаревшая информация -->
<s class="deprecated">Эта функция больше не поддерживается</s>
<style>
.old-price {
color: #f00;
opacity: 0.7;
}
.deprecated {
background-color: #ffecec;
padding: 2px 5px;
}
</style>
Рекомендации по именованию:
- Используйте семантические имена (old-price, deprecated, obsolete)
- Придерживайтесь единого стиля (kebab-case рекомендуем)
- Избегайте избыточных префиксов (например, "s-")
- Для BEM используйте модификаторы (price--old)
Ограничения:
- Не гарантирует уникальность (в отличие от id)
- Избыточное количество классов усложняет поддержку
- Длинные имена увеличивают размер HTML
Совет: Для сложной стилизации перечёркнутого текста используйте комбинацию:
text-decoration: line-through + дополнительные CSS-свойства