Заметки разработчика: селекторы CSS

CSS селекторы - самые популярные и сложные

Каждый, кто только начинает свое изучение веб-технологий и только приступает к HTML & CSS, чаще всего удивляются большому количеству селекторов, которые можно использовать для стилизации того или иного элемента.

Сегодня мы с вами посмотрим на самые распространенные селекторы:

Селектор по тэгу (типа body) — это когда вы выбираете элемент, делая ссылку на него непосредственно как на тэг. Это один из самых простых селекторов, и он используется, если вы хотите задать определенные стили всем подобным тэгам. Наиболее адекватное применение такого тега - в таблицах сбросов. В остальных случая их применение скорее нежелательно, потому что они могут создавать трудноотслеживаемые эффекты.

Селектор по id (типа info) - имеет достаточно высокую специфичность, по той причине, что должен использоваться только для одного элемента. Множественное использование этого типа селектора является нежелательным

Селектор по классу (типа. main) - самый распространённый вариант селектора. Имеет специфичность ниже, чем у id, но выше, чем просто у тэга. Рабочие лошадки верстки, потому что могут быть использованы на любых элементах множество раз. Комбинация тэга div и класса является по сути классикой веба, который позволяет «слепить» из элемента то, что захочет разработчик.

Селекторы на атрибут (типа [name=«tel»]) - применяются тоже достаточно редко, только когда нужно выделить элемент по специфичному атрибуту. Классическое применение - например для разных input. В остальном применяются не часто. Специфичность больше, чем id.

Мы разобрали с вами самые популярные селекторы. Начинайте создавать свои сайты!

Nordic IT School

Москва, ул. Большая Спасская 12

+7 925 632-21-47

+7 495 626-46-00

moscow@inordic.ru

Полезный дайджест Nordic IT

Каждую неделю отправляем информацию о наших бесплатных вебинарах и мастер-классах, оповещаем об акциях и стартах новых курсов

Бесплатные события