X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Какая разница между id и class

Приклад
  • 2024-05-27
  • 4173 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Если Вы занимаетесь версткой или хотя бы просто иногда сами добавляете HTML код на своем сайте и немного разбираетесь в этом, то возможно сталкивались с таким вопросом - какая же разница между указанием атрибутов id и class для элементов.

класс или id

По сути эффект один и тот же, скажут многие, ведь стили CSS можно задать так и так для элемента, но все же разница есть и сейчас рассмотрим какая.

Что это такое?

id - это уникальное имя, которое дается только одному единственному элементу. Нельзя его присвоить нескольким, это считается грубой ошибкой.

class - общее имя для элемента. Можно задавать скольким угодно элементам и все будут иметь тот же стиль. На странице может быть несколько элементов с одинаковым классом.

Кто главнее?

Если Вы присвоите одному элементу, например id="one", а также class="super" и зададите одни стили но с разными параметрами CSS для айди и класса, то браузер будет брать стили для id и игнорировать class. Например:


#one {font-size:11px;}
.super {font-size:15px;}

Тут элемент будет иметь размер шрифта 11 пикселей, а не 15.

Несколько class

Атрибут class имеет одно интересное свойство, оно же преимущество. Элементу можно задать несколько class, но не отдельно а через пробел, например:

class="super puper"

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

Якорные ссылки

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

Скрипты и атрибуты

Скрипты могут быть написаны и для тех и для тех атрибутов, но например для id есть свои отдельные фокусы, которых нет для class. Одним из таких примеров - это поиск элемента по айди с помощью document.getElementById().

Мнение

Что могу сказать по этому поводу. Лично я использую id для самых главных элементов и которые точно используются лишь один раз, например для шапки или подвала, сайдбара или еще чего-то. Просто иногда встречал, что верстальщик просто случайно указывал несколько раз один и тот же ID для разных блоков меню. Еще использую для тех элементов, с которыми работают скрипты, для остальных только классы.

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

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 7, в среднем: 5 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078