CSS селекторы - WebDesignStudio1.net

Справочник по 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&rvalue;.

[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, span ‑ с помощью запятой можно перечислять требуемые элементы, например, приведенный селектор выберет все тэги 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% случаев.

Взаимное расположение элементов в документе не влияет на приоритет использования селекторов.
Если на элемент ссылается несколько селекторов с одинаковым приоритетом, то установятся свойства последнего, т.е. того, который ближе к концу таблицы стилей.
Более конкретный селектор имеет больший приоритет. Например, имеем два набора правил для элемента с классом class1:
.class1 { … }
div .other .class1 { … }
Второе правило имеет больший приоритет, т.к. оно более конкретно выбирает элемент.
Селектор по ID имеет приоритет над селекторами класса, псевдокласса или атрибута.
Селектор атрибута имеет больший приоритет, чем селекторы тега или псевдоэлемента.
Селекторы классов имеют приоритет над селектором тега.
Стили, объявленные внутри элементов всегда имеют приоритет над стилями из внешних файлов.
Модификатор !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);
}

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

Результат функции градиента.

Заключение

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