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

CSS селекторы - это, по сути, определенные наборы html-элементов на странице, для которых задается некое форматирование. Т.е. это выборка элементов во определенным параметрам - имени тега, id, классу или группе каких-либо параметров.

Запись правил CSS

Записываются правила css внутри фигурных скобок в виде пар свойство: значение свойства, разделенных точкой с запятой. Причем блок с фигурными скобками всегда "принадлежит" какому-либо селектору.

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

Это селектор, который задает форматирование для всех элементов страницы, включая  html и body. Записывается так:

Этим правилом мы сказали, что все элементы с текстом на странице будут иметь шрифт семейства Tahoma, Verdana, sans-serif и размер шрифта в 14px.

Этот селектор имеет невысокий приоритет, равный 0 и правила, заданные в нем, могут быть переопределены любым другим селектором. Тем не менее он может быть очень полезен для задания таких свойств, как box-sizing или margin для всех элементов сразу.

Сейчас обычно для этого селектора, а также для селекторов псевдоэлементов ::before и ::after задается свойство box-sizing: border-box, которое изменяет алгоритм просчета ширины элементов в браузере, включая в ширину и высоту размеры padding и border-width:

Селектор элемента (или типа, тега)

Этот селектор предполагает, что мы назначаем правила форматирования для всех однотипных элементов (или тегов) на странице (или на всем сайте). В любом браузере для всех тегов есть своя css-таблица, которая отображает внешний вид элементов в соответствии с рекомендациями W3C, но поскольку между разными браузерами все же существуют некоторые отличия в css-правилах  для элементов + каждый сайт в соответствии с разработанным дизайном может требовать внесения изменений в эти правила, используют селектор элементов довольно часто. Для этого в css записывают название тега без всяких угловых скобок. Например,

Эти правила отменяют жирный по умолчанию шрифт для заголовков второго уровня и увеличивают размер шрифта.

"Вес" этого селектора равен единице.

Селектор класса

Определяет правила для всех элементов, у которых есть атрибут class="someclass". Перед именем класса нужно просто поставить точку в css:

Т.е. данным селектором определяется, что любому элементу с классом someclass будут заданы внешние и внутренние отступы и рамка. Это могут быть и блочные div, и p, и blockquote, и h2, и даже строчный span.

Есть разновидность этого селектора, которая говорит о том, что форматирование назначается для определённого элемента с таким классом. Так, например, селектор

говорит о том, что только для элементов div с атрибутом class="someclass" выравнивание текста будет по центру. Для всех остальных элементов с этим классом выравнивание текста будет слева (по умолчанию).

Приоритет этого селектора выражается цифрой 10.

Также может быть использован селектор, который предполагает, что правила задаются для тега, имеющего сразу 2 класса. В html код выглядит так:

А в css правила могут быть заданы следующим образом:

Т.е. между названиями 2-х классов нет пробелов, а точка ставится перед именем каждого класса. Учтите, что такой вариант предусматривает наличие обоих классов у элемента, для того чтобы к нему применилось соответствующее форматирование. Если элементу назначен только класс about  или только класс container, правила НЕ применятся.

На практике  к такому элементу с 2-мя классами чаще всего применяется форматирование, описанное для каждого класса в отдельности, например, так:

В том случае правила из разных классов как бы "складываются" и применяются в совокупности. Если же какие-то правила повторяются и в том, и в другом классе, то важен порядок их следования в CSS:

В данном примере класс content имеет красный цвет фона и шрифт с засечками, а класс about имеет розовый цвет фона и шрифт без засечек. И поскольку он записан в css-стилях ниже правил для класса content, то в какой бы последовательности мы не ставили эти классы в html-коде, у нас все равно будет блок с розовым фоном и шрифтом без засечек. Т.е. правила класса about перечеркивают соответствующие правила класса content. Посмотрите, как это выглядит в Инспекторе свойств (F12 или Ctrl+Shift+I):

Реальный пример:

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

Группировка селекторов предполагает, что css-правила задаются сразу для нескольких элементов. Необходимо это бывает тогда, когда ряд элементов имеет общие правила. И код будет компактней, если написать эти правила сразу для нескольких селекторов, а уже для каждого в отдельности писать отличия.

Например, общие правила для 3-х классов:

В общих правилах заданы такие свойства, как ширина, отступы, вид и толщина рамки и цвет текста.

А в правилах для каждого отдельного класса добавлен цвет фона и цвет рамки. Для самого последнего класса также задан цвет текста (color: brown), который переопределит белый цвет, заданный в общих правилах, т.к. записан ниже общих правил.

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

Селектор id

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

Сразу оговорюсь, что это НЕ значит, что на странице может быть только один элемент с атрибутом id. Это значит, что значение этого атрибута должно быть уникальным и иметь именно такой id может единственный элемент на странице.

Например, в разметке может быть следующий код:

Т.е. в заголовочной части страницы (или "шапке" сайта) может быть див с id="logo", в котором будет находится изображение с логотипом компании. А вся страница может быть разбита на ряд разделов (секций - тег section) с одним и тем же классом, но разными id. Но при этом значения id НЕ ПОВТОРЯЮТСЯ!   

В CSS запишем следующие правила:

В данном случае мы видим все прелести использования класса - он всего один для всех section, но при этом задает им одинаковое форматирование с точки зрения ширины, внешних (margin) и внутренних (padding) отступов. А для различных id заданы только разные цвета фона.

Пример в "натуральном виде":

About

On then sake home is am leaf. Of suspicion do departure at extremely he believing. Do know said mind do rent they oh hope of.

Services

General enquire picture letters garrets on offices of no on. Say one hearing between excited evening all inhabit thought you. Style begin mr heard by in music tried do. To unreserved projection no introduced invitation.

Portfolio

Particular use for considered projection cultivated. Worth of do doubt shall it their. Extensive existence up me contained he pronounce do. Excellence inquietude assistance precaution any impression man sufficient.

Contacts

Talent she for lively eat led sister. Entrance strongly packages she out rendered get quitting denoting led. Dwelling confined improved it he no doubtful raptures. Several carried through an of up attempt gravity. Situation to be at offending elsewhere distrusts if.

Возможно, у вас возникнет вопрос - а почему нельзя было использовать 2 класса, как в примере выше? Дело в том, что id - это еще и определенные якоря - т.е. закладки для внутренних ссылок, переход на которые осуществляется из меню, например, на одностраничных сайтах. И с помощью классов этого не сделать. Во-вторых, id имеет значительно больший приоритет, поэтому для селектора id можно переписать правила, заданные в любом классе. И, в-третьих, правила могут быть намного сложнее, чем в примере, и существовать в единичном варианте на странице. Тогда привязка их к селектору id - оптимальный выбор.

В отдельной статье вы можете прочитать об использовании псевдокласса :not и псевдоэлементах (::before, ::after, ::selection, :first-letter, :first-line).

Более сложные селекторы рассмотрены в статье "Селекторы CSS. Дочерние, родственные, селекторы атрибутов, псевдоклассы и псевдоэлементы".

P.S. Правил css за годы существования каскадных таблиц стилей было создано великое множество. Посмотреть, что   представляет собой каждое свойство можно на сайте htmlbook.ru или его обновленной версии WebReference.ru.