CSS селекторы - WebDesignStudio1
Per aspera ad astra


Параметры поиска

Выбор рубрики
Поиск по


Сортировать


Порядок отображения



CSS селекторы

Справочник по CSS селекторам. Перекроет потребности использования минимум на 80%.

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

Содержание.

Базовые CSS селекторы
Комбинации селекторов
Селекторы псевдоэлементов
Селекторы псевдоклассов
Приоритеты применениия селекторов
Правила
Функции в селекторах
Заключение

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

Ниже перечислены так называемые базовые, т.е. основные, селекторы.

* ‑ (звёздочка) выбирает все элементы на странице.
div ‑ селектор по типу элемента, выбирает на странице все указанные селектором элемены. Для наглядности указан тэг div, но точно также можно указывать любой другой элемент страницы: p, span, nav, table, input и т.п.
#name ‑ выбирает элемент с указанным значением атрибута id, т.е. id=»name». Надеюсь все знают, что значение такого атрибута должно быть уникальным на всей странице.
.classname ‑ селектор элементов по значению его атрибута class, т.е. те, у кого class=»classname».
[attr] ‑ селектор элементов, имеющих атрибут с именем attr.
[attr=value] ‑ селектор выборки элементов, имеющих атрибут с именем attr и значением, равным value, т.е. те, где attr=»value».
Примечание. Имя свойства и его значение чувствительны к регистру символов.

Существует множество модификаций селектора [attr=value].

[attr~=value] ‑ выбирает элементы, у которых имя атрибута attr, а значением является список слов(через пробел), одно из этих слов равно value, т.е. attr=»value1 value2 value».
[attr|=value] ‑ селектор элементов, у которых имя атрибута attr, а значение равно value или начинается с value‑.
[attr^=value] ‑ выбирает элементы с именем атрибута attr, значение которого начинается на value, например, class=»value123″. Пример выборки на странице ссылок с определенным протоколом: a[href^=»https»].
[attr$=value] ‑ выбирает элементы с атрибутом attr, значение которого заканчивается на value, например, attr=»other_value».
[attr*=value] ‑ селектор элементов с атрибутом attr, в значении которого встречается подстрока value, например, attr=»other_value123″.

Комбинации селекторов

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

div, p ‑ с помощью запятой можно перечислять требуемые элементы, например, приведенный селектор выберет все тэги div и span.
div span ‑ комбинация селекторов через пробел выбирает все указанные вложенные элементы вне зависимости от уровня вложенности. Приведенная комбинация селекторов выберет все элементы span, которые находятся внутри тега div.
div > span ‑ выборка строго дочерних элементов, т.е. приведенная строка позволит выбрать только те span, которые являются дочерними элементу div.
div ~ span ‑ выборка элементов span, которые находятся внутри элемента div и имеют общего родителя.
div + p ‑ выбирает элементы p, которые являются соседними к элементу div.

Селекторы псевдоэлементов

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору. Позволяет производить отбор более тонко. Например, псевдоэлемент ::first-letter поможет изменить первый символ какого-то текста. Синтаксис использования прост:

selector_name::pseudo-element {
   property: value;
}

Поэтому приведу лишь список стандартных псевдоэлементов.

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop
  • ::placeholder
  • ::marker
  • ::spelling-error
  • ::grammar-error

Детальнее узнать о каждом из них можно по ссылке

Селекторы псевдоклассов

Псевдокласс — ключевое слово, определяющее особое состояние выбираемого элемента. Например, посещенная ссылка — :visited; элемент, над которым находится курсор мыши — :hover; первый дочерний элемента родителя — :first-child. Правила для пседоклассов подчиняются тем же требованиям, что и остальные селекторы, поэтому ограничусь списком наиболее часто используемых псевдоклассов.

  • :link
  • :visited
  • :active
  • :hover
  • :focus
  • :first-child
  • :last-child
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :first-of-type
  • :last-of-type
  • :empty
  • :target
  • :checked
  • :enabled
  • :disabled

Подробнее познакомиться с ними можно здесь

Приоритеты применениия селекторов

Чтобы не запутаться в применении различных селекторов, существует набор правил их использования. Основные из них, которых хватит на, думаю, на 90% случаев.

  1. Взаимное расположение элементов в документе не влияет на приоритет использования селекторов.
  2. Если на элемент ссылается несколько селекторов с одинаковым приоритетом, то установятся свойства последнего, т.е. того, который ближе к концу таблицы стилей.
  3. Более конкретный селектор имеет больший приоритет. Например, имеем два набора правил для элемента с классом class1:
    .class1 { … }
    div .other .class1 { … }
    Второе правило имеет больший приоритет, т.к. оно более конкретно выбирает элемент.
  4. Селектор по ID имеет приоритет над селекторами класса, псевдокласса или атрибута.
  5. Селектор атрибута имеет больший приоритет, чем селекторы тега или псевдоэлемента.
  6. Селекторы классов имеют приоритет над селектором тега.
  7. Стили, объявленные внутри элементов всегда имеют приоритет над стилями из внешних файлов.
  8. Модификатор !important имеет высший приоритет среди всех других объявлений. Если к элементу применяются два стиля с этим модификатором, то будет использован стиль с большим приоритетом.
    Примечание. Следует по возможности избегать модификатора !important, поскольку он усложняет отладку документа. Не используйте модификатор в стилях сайта, используйте его в страничных стилях, которые переопределяют стили сайта или библиотеки. Вместо модификатора селектору можно добавить приоритет, переместив его к концу таблицы или задав более конкретное значение правилу (см. п.3).

Правила

CSS правила ‑ это запись вида @rule, они предписывают таблице стилей, что она должна выполнить или как себя вести. Часто используются следующие:

@import — импортирует внешнюю таблицу стилей

@media — используется для создания медиа-запросов

Синтаксис.

@import url(«имя файла») [типы носителей];

или

@import «имя файла» [типы носителей];

Поясню на примерах.

@import «/css/style.css» screen; /* Стили для вывода результата на монитор */

@import «/css/print.css» handheld, print; /* Стили для печати */

Ниже приведены некоторые типы устройств для импорта специфичных стилей.

  • all ‑ все типы, значение по умолчанию.
  • aural ‑ речевые синтезаторы, а также программы для воспроизведения текста вслух, например, речевые браузеры
  • braille ‑ устройства, основанные на системе Брайля
  • handheld ‑ наладонные компьютеры и аналогичные им аппараты
  • print ‑ печатающие устройства
  • projection ‑ проектор
  • screen ‑ экран монитора
  • tv ‑ телевизор

Функции в селекторах

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

  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • linear-gradient()
  • opacity()
  • perspective()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • rotate()
  • rotateX()
  • rotateY()
  • rotateZ()
  • saturate()
  • sepia()
  • scale()
  • scaleX()
  • scaleY()
  • scaleZ()
  • skew()
  • skewX()
  • skewY()
  • translate()
  • translateX()
  • translateY()
  • translateZ()
  • var()

Впечатляет список, не правда ли?
Для примера, рассчитаем ширину блочного элемента на 40 пикселей меньше ширины экрана:

.classname {
   width: calc(100% ‑ 40px);
   margin: auto 10px;
}

Дизайнерам очень понравится функция градиента:

.classname {
   background: linear-gradient(to bottom, #c7f0f4 , #1e5b60);
}

Вот как результат такой функции будет выглядеть на экране.

Пример функции градиента.

Заключение

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