Селектор определяет, к какому элементу применять то или иное CSS-правило.

Базовые селекторы

Селекторы по элементу Этот базовый селектор выбирает элемент, к которому будем применятся правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы используется для создания интерактивных элементов управления в веб-формах."> . Селекторы по классу Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class .
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index" или похожем). Селекторы по идентификатору Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc" или похожем). Универсальный селектор Этот базовый селектор выбирает все элементы. Он также существует в варианте для локального и глобального пространств имен.
Syntax: * ns|* *|*
Example: селектор * выберет все эелементы. Селекторы по атрибуту Этот базовый селектор выбирает элементы, основываясь на одном из их атрибутов и/или его значении.
Синтаксис:
Пример: селектор выберет все элементы с атрибутом autoplay (независимо от его значения).

Комбинаторы

Комбинатор "+" выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой элемент, который находится непосредственно после элемента

. Родственные селекторы Комбинатор"~" выбирает элементы, которые находятся после указанного элемента, если у них общий родитель.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы , которые находятся после элемента определяет собой абзац текста.">

внутри одного родителя. Дочерние селекторы Комбинатор ">" выбирает элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет все элементы , которые находятся внутри элемента

element. Вложенные селекторы Комбинатор " " выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы , которые находятся внутри элемента ) является базовым контейнером для элементов основного потока (flow content). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя ">
.
Псевдоэлементы
Псевдоэлементы являются абстрактными, в отличие от элементов HTML, отвечающих за представление. Например, в HTML нет отдельных элементов для обозначения первой буквы или первой строчки текста, или маркера для неупорядоченного списка. Псевдоэлементы обозначают такие объекты и дают возможность стилизовать их с помощью 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 страниц.
Тема хоть и кажется крайне запутанной на первый взгляд становится простой и понятной после некоторого периода практики, подкрепленного качественной теорией.
CSS селекторы – одна из главных особенностей языка CSS. Селекторы позволяют обратиться как к группе элементов, так и к только одному из них.
Селекторы в CSS
Селекторы нужны для того, чтобы указать браузеру, к каким элементам применять стили, описанные в фигурных скобках.
P{ Стили… }
В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.
Какими бывают css селекторы?
Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок
Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"
Как видите, главное поставить точку. Стилевой класс можно привязывать к неограниченному количеству элементов. Элементу можно прописать несколько классов.
Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.
Задается он так:
Абзац
То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.
Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.
#first{ Font-size: 22px }
Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.
Псевдоклассы
В CSS есть один интересный вид селекторов – псевдоклассы. То есть классы, которые по умолчанию есть у элементов и их не нужно дополнительно задавать. Некоторые из них работают только для ссылок, а некоторые можно применить ко всем элементам. В любом случае css псевдоклассы сильно облегчают работу веб-разработчику.
Псвевдокласс – это стилевой класс элемента, который мы на самом деле не задавали сами, просто он есть сам по себе. Например, увидев в html такой код:
Абзац
Вы абсолютно точно можете сказать, что у этого абзаца есть класс special , потому что он там прописан. Но псевдоклассы не нужно писать, они есть у элементов по умолчанию и в этом их преимущество в данном случае. Далее давайте рассмотрим самые популярные из них.
Для ссылок
Для полей ввода и ссылок
:focus – стиль применяется к элементу, который получает фокус ввода.
На самом деле для полей ввода появилось очень много новых классных псевдоклассов, но все они впервые введены в CSS3 , а в этой статье я хотел бы обсудить только самые простые. О CSS3 селекторах обязательно будет статья в дальнейшем.
Для всех элементов
1. :hover – стиль применяется при наведении на элемент
2. :first-child – выбрать первый дочерний элемент
3. :last-child – последний дочерний элемент
4. :nth-child() – в скобках записывается число или формула, которая определяет, какие элементы будут выбраны.
5. :first-of-type, :last-of-type, :nth-of-type() – работают практически аналогично предыдущим псевдоклассам. Разница только в том, что здесь учитывается тип элемента. Разницу можно почувствовать на примере:
   li:first-child – будет выбран первый пункт списка, но только в том случае, если в родительском блоке элемент li идет первым. Если до него стоит другой тег, не выберется ничего.
6. li:first-of-type – будет выбран первый пункт списка из всех, что есть в родителе. При этом не важно, где они располагаются в коде. Надеюсь, разница понятна.
7. :nth-last-child – работает аналогично:nth-child, но отсчет ведется от последнего элемента, а не от первого.
8. :nth-last-of-type – аналогично:nth-last-child, но с учетом типа элемента.
Это не все псевдоклассы, но самые популярные и необходимые. Собственно, все псевдоклассы помечаются в css одинаково, через двоеточие. К тому же можно комбинировать селекторы и получать интересные возможности:
a:visited:active – стили для уже посещенной ссылки, на которую кликают.
div:first-child:hover – стили для всех первых блоков в их родителях, на которые наводят курсор.
Как видите, такие селекторы дают большие возможности в плане стилизации элементов. Используйте их и сможете без труда дотянуться до любых элементов.
Объединение селекторов
Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.
Вложенные селекторы
Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
Table td – выберет все ячейки, лежащие в таблицах
Ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов , лежащее в абзацах с классом class2.
Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
#header .logo span:first-letter{} – выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.
Дочерние селекторы
Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними , то нужно прописать это так:
Ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
P > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:
Если прописать такой селектор P > a , то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.
Соседние селекторы
Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {} , то этот селектор выберет элемент с атрибутом class = "class4" , и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:
Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img . Вот если его удалить, тогда все заработает.
Итак, мы с вами рассмотрели самые основные и наиболее простые селекторы. Наверняка этих знаний вам хватит, чтобы решить 95% проблем. В следующей статье я опишу некоторые более специфические css селекторы.
Селекторы атрибутов
Позволяют выбрать определенные элементы, не привязывая к ним стилевой класс или идентификатор.
Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Несколько примеров, чтобы было понятно:
* – выбирает все элементы, которые имеют атрибут href с любым значением.
input – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input – выбирает все поля, тип которых password , то есть поля для ввода пароля.
img – выбирает картинку, у которой задан атрибут src = "/logo.png" .
Как видите, прописывать css селекторы атрибутов не так уж и сложно. Их самое главное отличие – квадратные скобки, в которых записывается либо просто атрибут, либо атрибут с его точным значением. Но на этом функционал этих селекторов не заканчивается.
Продвинутые css селекторы атрибутов
Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div – выбирает все div-ы, у которых есть стилевой класс, начинающийся на "block" . Таким образом, будут выбраны, например, такие блоки: "block-head", "block-3", "blocknote" . Главное, чтобы в начале значения было ключевое слово.
Поиск в конце строки
A – выбирает все ссылки, у которых адрес заканчивается на.rar . Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.
Поиск подстроки везде в значении
span – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.
Поиск префиксов
p – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first- , с которого начинается имя класса.
Поиск слов внутри значения
input – выберет все элементы input, в которых значение атрибута идентификатора содержит в себе слово text . Его отличие от поиска подстроки везде отличается тем, что входить должно именно слово, а не подстрока.
Последние два варианта редко где применяются и едва ли вам часто пригодятся, но для общего развития все-таки можно о них знать.
Для чего могут пригодиться селекторы атрибутов
С помощью подобных селекторов можно выбирать многие html-элемента, не задавая им стилевых классов. В некоторых случаях благодаря такому способу можно сократить код и упростить себе работу. Например, выше я приводил пример с иконкой для архивов. Тут появилась еще одна идея. Например, на своем сайте вы часто ссылаетесь на один другой ресурс (википедию, скажем) и хотите рядом с ссылками на википедию отображать специальную иконку, которой у других ссылок быть не должно.
Реализовать это можно так:
A {css-правила}
На самом деле способов применения селекторов атрибутов можно придумать еще много. Они могут в какой-то мере упростить работу там, где это нужно. Используйте css и подписывайтесь на блог, чтобы узнавать больше о веб-разработке.
Css3 селекторы и псевдоклассы
О новых css3 селекторах, о которых не писал в прошлых статьях.
Улучшение работы с формами
Это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input , которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.
Добавление стилей с учетом валидности
Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript .
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @ .
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:
Input:invalid{ Color: red; }
Теперь если мы пишем неправильные значения в полях, текст становится красным. Соответственно, можно также использовать картинки галочки и крестика для того, чтобы показывать пользователю, правильно ли он заполнил все.
Стили для обязательных полей
Также хотел бы отметить, что соответствующий псевдокласс появился и для обязательных полей.
:required – выберет элементы, у которых есть данный атрибут. То есть все поля, обязательные к заполнению.
:optional – противоположный класс, выберет поля, которые являются необязательными.
Псевдокласс:not
:not является своего рода антиселектором, который позволяет определить, к каким элементам НЕ ПРИМЕНЯТЬ стили. Пару примеров.
A:not(:last-child){} – выберет все ссылки на странице, кроме последней.
.nav:not(li){} – выберет все элементы с классом nav , но это не должны быть пункты списка (li).
#article p:not(.special:first-child) – выберет все абзацы в блоке article , кроме первого абзаца с классом special.
Как видите, в круглых скобках для псевдокласса записывается условие: что именно нужно исключить из выбора. В условии также можно записывать комбинированные селекторы, так что вы можете выбрать и исключить все, что угодно.
Вот такой вот нужный иногда псевдокласс, он нужен не только в теории, но и на практике. Ах да, еще же вы можете продолжить составление селектора после:not (). Например:
Div:not(#header) .wrap – выбирает все дивы c классом wrap , кроме дива с id = "header"
Это были селекторы, которые появились в CSS3.
Приоритет css селекторов
Чтобы определить, какие стили являются более приоритетными, пользуйтесь простыми правилами:
Идентификатор является самым приоритетным селектором. Если у элемента есть стилевой класс и id , и в обоих назначены одинаковые свойства с разными значениями, то будет выполнены те стили, которые записаны для идентификатор.
Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем.firstline , потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.
Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). Table p , в свою очередь, конкретнее, чем просто p . В общем, просто знайте о таких правилах.
Итог
В этой статье не были рассмотрены селекторы атрибутов, но вообще о них я уже писал ранее. Я же желаю вам успешно изучать сайтостроение, в том числе и css селекторы.
Хочу еще добавить, что если вы используете jQuery, то там свои селекторы, хотя очень похожие на эти, но небольшие различия есть.
CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.
Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.
Объявление стиля состоит из двух частей: элемента веб-страницы — селектора , и команды форматирования — блока объявления . Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

Рис. 1. Структура объявления CSS-стиля
Виды каскадных таблиц стилей и их специфика
1. Виды таблиц стилей
1.1. Внешняя таблица стилей
Внешняя таблица стилей представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега , расположенного внутри раздела . Такие стили работают для всех страниц сайта.
К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).
Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .
1.2. Внутренние стили
Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).
...
1.3. Встроенные стили
Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:
Обратите внимание на этот текст.
Такие стили действуют только на тот элемент, для которого они заданы.
1.4. Правило @import
Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:
Правило @import также используется для подключения веб-шрифтов:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Виды селекторов
Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.
2.1. Универсальный селектор
Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .
2.2. Селектор элемента
Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .
2.3. Селектор класса
Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег
и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.
Инструкция пользования персональным компьютером
.headline { text-transform: uppercase; color: lightblue; }
2.4. Селектор идентификатора
Селектор идентификатора позволяет форматировать один конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.
#sidebar { width: 300px; float: left; }
2.5. Селектор потомка
Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .
Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:
p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;
p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента
First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .
2.6. Дочерний селектор
Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .
2.7. Сестринский селектор
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.
h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом
, не затрагивая остальные абзацы;
h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.
2.8. Селектор атрибута
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:
[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;
селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;
селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;
селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;
селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;
селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;
селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;
селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .
2.9. Селектор псевдокласса
Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:
:hover — любой элемент, по которому проводят курсором мыши;
:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;
:active — элемент, который был активизирован пользователем;
:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;
:invalid — поля формы, содержимое которых не соответствует указанному типу данных;
:enabled — все активные поля форм;
:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;
:in-range — поля формы, значения которых находятся в заданном диапазоне;
:out-of-range — поля формы, значения которых не входят в установленный диапазон;
:lang() — элементы с текстом на указанном языке;
:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;
:target — элемент с символом # , на который ссылаются в документе;
:checked — выделенные (выбранные пользователем) элементы формы.
2.10. Селектор структурных псевдоклассов
Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:
:nth-child(odd) — нечётные дочерние элементы;
:nth-child(even) — чётные дочерние элементы;
:nth-child(3n) — каждый третий элемент среди дочерних;
:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;
:nth-child(n+2) — выбирает все элементы, начиная со второго;
:nth-child(3) — выбирает третий дочерний элемент;
:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;
:first-child — позволяет оформить только самый первый дочерний элемент тега;
:last-child — позволяет форматировать последний дочерний элемент тега;
:only-child — выбирает элемент, являющийся единственным дочерним элементом;
:empty — выбирает элементы, у которых нет дочерних элементов;
:root — выбирает элемент, являющийся корневым в документе — элемент html .
2.11. Селектор структурных псевдоклассов типа
Указывают на конкретный тип дочернего тега:
:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;
:first-of-type — выбирает первый дочерний элемент данного типа;
:last-of-type — выбирает последний элемент данного типа;
:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;
:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.
2.12. Селектор псевдоэлемента
Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:
:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;
:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;
:before — вставляет генерируемое содержимое перед элементом;
:after — добавляет генерируемое содержимое после элемента.
3. Комбинация селекторов
Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:
img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .
4. Группировка селекторов
Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:
H1, h2, p, span { color: tomato; background: white; }
5. Наследование и каскад
Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.
5.1. Наследование
Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.
Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .
Принудительное наследование
С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.
Как задаются и работают CSS-стили
1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);
2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;
3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.

Рис. 2. Режим разработчика в браузере Google Chrome
4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.
div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}
5.2. Каскад
Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.
Правило!important
Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.
Специфичность
Для каждого правила браузер вычисляет специфичность селектора , и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:
для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.
H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.
Порядок подключённых таблиц
Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.
Селектор в CSS — это указатель на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:
1. Селекторы по тэгам : h1
2. Селектор по id : #main
3. Селекторы по классам : .hidden
4. Селектор по нескольким классам
Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс.hidden и класс.closed .
Hidden.closed
5. Контекстные селекторы
Разделяются пробелом. Такие селекторы используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.
P strong ul .selected .header .menu a
6. Соседние селекторы
Выделяет последующий элемент. Записываются с помощью знака + . Читается как: применить свойства к селектор2 который должен быть сразу после селектор1 .
Стили применяются к элементу, подходящему под селектор2 , только если перед ним расположен элемент, подходящий под селектор1 .
... .green + .selected {}
В примере.green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом.green . Селектор.green + li тоже применит стили ко второму элементу, а селектор.selected + .green не сработает.
7. Родственные селекторы
Выделяет последующие элементы. Похожи на предыдущий, но с тем различием, что выбираются все следующие элементы , а не только первый элемент.
• item
Selected too
Not selected ... ul ~ p {}
В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент.
8. Дочерние селекторы
Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются.
Ul > li {}
В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности.
ul > li означает то же, что и ul li , но выбираются только li первого уровня вложенности, которые напрямую являются вложенными в ul. На li вложенные в другие дочерные li элементы, правила уже не будут действовать.
9. Селекторы атрибутов
Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобок элемент[атрибут] .
Примеры селекторов атрибутов:
Input input div a a a a
В примере выше ~ позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой, например из:
10. Глобальный селектор
Селектор * выберет все элементы. Его также можно использовать для выделения дочерних элементов:
* { margin: 0; padding: 0; } .content * { outline: none; }
11. Псевдоклассы
Примеры псевдоклассов:
A:link a:visited a:active a:hover input:checked .clearfix:after {} div:not(#container) p::first-line p::first-letter
Псевдокласс отрицания:not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container.