CSS селекторы. Кратко о главном.

Мы уже говорили о том, что каскадные таблицы стилей представляют из себя совокупность правил оформления (которые в свою очередь состоят из селекторов с блоком объявлений) примененных к определенным html тегам, за счет чего и формируется внешний вид сайта.

CSS селектор — это составная часть CSS правила отвечающая за определение конкретных html тегов, к которым будут применены стили оформления, прописанные в этом правиле.

Так, именно благодаря селекторам браузер понимает к каким именно элементам кода страницы нужно применять конкретные стили оформления.

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

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

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

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

Простые селекторы

Универсальный селектор — отвечает за выбор вообще всех элементов в документе. Задается звездочкой. Обычно применяется для обнуления стилей браузеров, установленных в них по умолчанию, чтобы у всех, кто будет заходить на сайт не уплыло оформление в случае использования каких-то собственных настроек браузера или же различных плагинов…
```
* {
	какой-то стиль;
}
```
Селектор типа — выбирает все теги, соответствующие определенному типу. Задается названием тега. Используется для задания общих правил оформления документа, к примеру, задать разные шрифты заголовкам и простому тексту документа.
```
h1 {
	какой-то стиль;
}
```
Селектор класса — применит правило цсс ко всем тегам с конкретным названием класса. Задается точкой с написанным сразу после нее названием класса. Пожалуй самый часто встречающийся в верстке селектор. Обычно используется, чтобы задавать различные стили оформления тегам одинаковым по типу, но разным по функциональному назначению.
```
.leftColumn  {
	какой-то стиль;
}
```
Селектор идентификатора — применяется для оформления уникальных элементов на странице. Задается решеткой после которой идет название id. Используется, если нужно оформить один конкретный элемент страницы.
```
#alertButton {
	какой-то стиль;
}
```
Селекторы атрибутов — выбирает теги у которых присутствует атрибут. Задается названием атрибута в квадратных скобках. Может использоваться как для оформления группы тегов в которых просто присутствует заданный атрибут, так и для группы тегов в которых присутствует заданный атрибут с определенным значением.
```
[type] {
	какой-то стиль;
}
 
[type="submit"] {
	какой-то стиль;
}
 
input[type="submit"] {
	какой-то стиль;
}
```

Сложные селекторы

Селектор потомка — выбор потомков (тегов находящихся внутри другого тега) элементов. Задается через пробел (родитель — пробел — потомок).
```
div p {
	какой-то стиль;
}
```
Селектор дочернего элемента - выбор элемента непосредственно вложенного в другой элемент. Задается символом «>» (родитель-галочка-дочерний элемент). Дочерний элемент отличается от потомка тем, что следует непосредственно после родителя (первый уровень вложенности). В то время как потомком считается любой тег внутри другого не зависимо от уровня вложенности.
```
.sidebar>ul {
	какой-то стиль;
}
```
Селектор сестринского элемента — выбирает тег идущий сразу после другого тега (не заключенный внутрь, а идущий далее). Задается плюсом (первый элемент — плюс — сестринский элемент). На практике используется редко. Обязательным условием применение является наличие общего родителя для всех элементов объединенным знаком «+».
```
h1+p {
	какой-то стиль;
}
```

Псевдоклассы и псевдоэлементы

Вышеперечисленная классификация селекторов CSS зависела исключтиельно от разметки документа. Если мы хотим задать изменение внешнего вида элементов в зависимости от изменения его состояния на странице ( к примеру смена цвета кнопки при наведении ), то мы можем использовать селекторы псевдоклассов и псевдоэлементов.

Пара советов начинающим

Помните, что в отличие от html в CSS регистр букв имеет значение. Тоесть класс .active и .Active это не одно и то же! Они применятся к разным элементам, если таковые есть в документе.
Называйте селекторы для оформления так, чтобы потом в них не запутаться: .leftColumn — хорошее название, .left — зависит от ситуации, но уже неочень, .llll — фигня какаято, ты сам то скажешь не глядя на код откуда этот класс взялся?
Еще раз напоминаю — если элемент на странице один, такой весь уникальный, то для него используем id, если же есть вероятность, что появится еще один такой или же просто подобных элементов на странице несколько, то пользуйтесь для оформления классами.

Подводя итоги

Селекторы в CSS — это мощнейший инструмент идентификации определенных элементов страницы или же группы элементов объединенных конкретным признаком для дальнейшего применения к ним стилей оформления из блока объявлений относящегося к данному селектору.

После освоения общих принципов взаимодействия и создания селекторов вы забудете о проблемах с оформлением веб-документов. Хорошее знание селекторов позволяет значительно сократить время верстки html страниц.

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

Блог Vaden Pro