Атрибут id тега <i>
Описание
Атрибут id задаёт уникальный идентификатор для тега <i>, позволяя обращаться к нему через CSS и JavaScript. ID должен быть уникальным в пределах документа.
<i id="important-icon">⚠️</i>
<i id="user-icon">👤</i>
Особенности именования:
| Правило | Пример | Недопустимо |
|---|---|---|
| Начинается с буквы | id="icon-warning" |
id="1-icon" |
| Без пробелов | id="user_icon" |
id="user icon" |
| Регистрозависимость | Icon ≠ icon |
- |
Использование в CSS:
<style>
#important-icon {
color: #e74c3c;
font-size: 1.5em;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>
<i id="important-icon">⚠️</i>
Доступ через JavaScript:
<i id="dynamic-icon">✨</i>
<button onclick="animateIcon()">Анимировать</button>
<script>
function animateIcon() {
const icon = document.getElementById('dynamic-icon');
icon.style.transform = 'rotate(360deg)';
icon.style.transition = 'transform 0.5s ease';
}
</script>
Рекомендации:
- Используйте для:
- Уникальных элементов, требующих особой стилизации
- Элементов, к которым нужно обращаться из JavaScript
- Якорных ссылок внутри страницы
- Избегайте:
- Дублирования ID на странице
- Использования для стилизации (лучше классы)
- Слишком общих имен (
id="icon")
Сравнение с классом:
| Характеристика | ID | Class |
|---|---|---|
| Уникальность | Один на странице | Много элементов |
| Специфичность CSS | Высокая (0100) | Низкая (0010) |
| Использование | Уникальные элементы | Группы элементов |
Примечание: Хотя технически возможно использовать ID для тега <i>, на практике его чаще применяют для семантически значимых элементов. Для иконок и декоративных элементов обычно достаточно классов.