Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Селекторы CSS

Селекторы в CSS по категориям

Селекторы
Селекторы в языке CSS
Описание видов селекторов в языке CSS.

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

Селектор (от англ. selector) — сортировка, выборка. Под селекторами, в языке CSS понимается способ выборки элементов (тегов) страницы.

Как мы знаем из учебника по CSS, схема CSS-кода выглядит следующим образом:

селектор {
 CSS-свойство: значение;
 CSS-свойство: значение; 
 ... и т.д.
}

Виды CSS-селекторов

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

Обычно, при создании сайта, используют лишь основные селекторы.

Основные виды селекторов CSS

1. Селектор тега — выбор элемента страницы по имени его тега имяТега { }
2. Селектор class — выбор элемента страницы по имени его класса .имяКласса { }
3. Селекторы id — выбор элемента страницы по имени его уникального идентификатора #имяУникальногоИдентификатора { }

Взаимоотношения между селекторами CSS

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

1. Контекстные селекторы — выбор элементов потомков селектор селектор { } (между селекторами ставят пробел).
2. Дочерние селекторы — выбор дочерних элементов селектор > селектор { } (между селекторами ставят знак больше).
3. Соседние селекторы — выбор соседних (братских, сестринских) элементов селектор + селектор { } (между селекторами ставят знак плюс).

Если что не понятно, не переживайте, каждый селектор и их взаимоотношения мы рассмотрим отдельно, в статьях посвященных только им, вот только допишу эти статьи 🙂

Селекторы атрибутов и значений

Селекторы атрибутов и значений — выбирают элементы по их атрибуту или атрибуту и значению.

1. Селектор атрибута — выбор элемента по имени атрибута [атрибут] { }
2. Селектор атрибута и значения — выбор элемента по имени его атрибута и значения [атрибут = "значение"] { }

Универсальный селектор

В CSS-коде, универсальный селектор записывают как символ звёздочка * Универсальный селектор необходим для того,
чтобы задать CSS-свойства сразу всем элементам страницы. Обычно его используют для того чтобы обнулить отступы у элементов, пример:

* { margin:0; padding:0; }

Отступы у всех элементов страницы равны 0.

Группирование селекторов

Группирование селекторов — выбор нескольких селекторов и назначение им определённых CSS-свойств, схема:

селектор, селектор {  }

Между селекторами ставят запятую.

Читать далее: Селекторы тегов в CSS

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget