30 CSS селекторов — Объяснение селекторов. Описание основных 5 селекторов.

30 CSS селекторов — Объяснение селекторов. Описание основных 5 селекторов.


Селектор – это кусок кода, который описывает элемент или группу элементов, которая указывает браузеру, какой из элементов выбрать при определённых условиях, для применения конкретного стиля.

Объяснение селекторов

Ниже описаны основные селекторы:
1) .Х – этот селектор по классу Х. Основное различие между айди и классом – класс может установиться для нескольких объектов. А айди – уникален. Класс – стоит применять для применения одного и того же стиля к нескольким элеменатам.


2) #X – селектор по айди. Символ обозначающий решетку показывает: id = X. Прикрепляя заданный стиль по id нужно не забывать, что он должен быть уникальным. Для того чтобы не было кучи ошибок, лучше применять селекторы по классам или названиям тегов. Но этот селектор обычно применяется в автоматизированном тестировании, потому что он хорошо выделяет нужный элемент 


3) * — Селектор всех элементов. Символ звёздочки выбирает все элементы на странице. Разработчики применяют их для того что бы обнулять значение всех элементов страницы( к примеру, значение отступов).

Либо для выделения дочерних элементов. Но всё же, на практике это применяют редко, сам селектор тяжеловат для браузера. Поэтому использовать его нужно очень аккуратно.


4) X – Селектор типа. В ситуации когда вам нужно выбрать все элементы одного типа, но у них нет ни айди или класса, то их можно выбрать по типу. Допустим, выбрать все упорядоченные списки на странице.


5) Х Y – Селектор потомков. Он идёт в ход когда попадается ситуация, что нужно выделить элементы определённого типа среди всех элементов дочернего типа. Один из примеров, это выделение ссылок которые находятся в элементе li.

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


Вывод: В этой статье, были представлены основные 5 селекторов в CSS, но эта статья создавалась для того что бы человек прочитавший её, если посчитал что он не полностью освоил эту тему, мог обратиться к источникам, к примеру, к книгам, сайтам, самоучителям. То есть начал сам искать информацию. 

Это поможет человеку изучающему язык, не только поддерживать интерес, ища информацию, но и находить много переферийной информации пока он находится в поиске чего то конкретного.

Пока нет Комментариев... Стань Первым!

Добавить комментарий

Вы должны авторизоваться для отправки комментария.