Атрибут class тега <del>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <del> для стилизации удалённого текста. Это стандартный HTML-атрибут, который работает со всеми элементами, включая теги для редактирования текста.
<p>
Цена продукта:
<del class="old-price discount">$199.99</del>
<ins>$149.99</ins>
</p>
<style>
.old-price {
color: #999;
text-decoration: line-through;
}
.discount {
background-color: #fff9f9;
padding: 2px 5px;
border-radius: 3px;
}
</style>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Множественные классы | Можно указывать несколько классов через пробел |
| Наследование | Стили применяются ко всему содержимому тега |
| Динамическое изменение | Классы можно добавлять/удалять через JavaScript |
| Специфичность | Селекторы классов имеют специфичность 0,0,1,0 |
Практическое применение:
<style>
/* Базовый стиль удалённого текста */
.revision-del {
color: #d33;
text-decoration: line-through;
position: relative;
}
/* Дополнительный эффект при наведении */
.revision-del:hover::after {
content: " (удалено)";
font-size: 0.8em;
color: #999;
}
/* Стиль для важных изменений */
.major-change {
background-color: #ffebee;
padding: 0 2px;
}
</style>
<article>
<p>
<del class="revision-del major-change" datetime="2023-11-01">
Старая версия требования
</del>
<ins>Новая версия требования</ins>
</p>
</article>
Рекомендации по именованию классов:
- Используйте семантические имена (
.old-priceвместо.red-text) - Придерживайтесь единого стиля именования (BEM, kebab-case и др.)
- Избегайте избыточных классов (
.delдля<del>) - Для модификаторов используйте префиксы (
--important,__deleted)
Советы по стилизации:
- Сохраняйте стандартное зачёркивание (
text-decoration: line-through) - Используйте приглушённые цвета для удалённого текста
- Добавляйте hover-эффекты для интерактивности
- Сочетайте с атрибутами
datetimeиcite - Тестируйте контрастность для доступности
Доступность (a11y):
- Не полагайтесь только на цвет для обозначения удаления
- Сохраняйте зачёркивание как визуальный индикатор
- Для сложных случаев используйте ARIA-атрибуты
- Тестируйте со скринридерами
Примечание: Хотя классы позволяют гибко стилизовать удалённый текст, не переусердствуйте с оформлением - основной функцией <del> остаётся семантическое обозначение удалённого контента, а не декоративные эффекты.