Использование селекторов

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


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


Состав выбора

Типичный селектор состоит как минимум из одного элемента и применяется ко всем элементам HTML-документа, которые соответствуют правилу. Текущий селектор выглядит следующим образом:

selector {
property: value;
}

Выбор может быть любым из перечисленных ниже или их комбинацией:

Type

Имя HTML-тега.

Всегда стоит на первом месте в комбинированном селекторе, например div#idValue или h1.classname.

Class

Значение атрибута class элемента.

Записывается с точкой ( . ) перед именем: .classname. Несколько классов для одного элемента перечисляются без пробела: .classname1.classname2.

ID

Значение атрибута id элемента.

Запись с хэшем ( # ) перед id: #idValue.

Attribute

Любой атрибут, как официально поддерживаемый, так и собственный.

Записан внутри квадратных скобок ( [] ) и может содержать или не содержать его значение: [title] или [title="Некоторый текст"].


Кроме того, существуют псевдоклассы и псевдоэлементы для более тонкой настройки правил и даже генерации HTML-элементов из ничего.

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


Комбинатор потомка ( пробел )

Ссылка на все элементы, которые являются потомками (любого уровня в глубину) указанного элемента.

Дочерний комбинатор ( > )

Обращается ко всем элементам, которые являются дочерними (прямыми потомками) указанного элемента.

Соседний родственный комбинатор ( + )

Указывает на элемент, который находится непосредственно после указанного элемента.

Общий родственный комбинатор ( ~ )

Относится ко всем элементам, которые являются ближайшими братьями и сестрами указанного элемента.


Например,

#elementID div.elementClass > h2 + img[alt=”Hello there”] ~ span:last-of-type

селектор приведет к тому, что стили будут применены к последнему тегу <span> среди элементов после тега <img>, содержащего атрибут alt со значением "Hello there", который находится непосредственно рядом с тегом <h2>, расположенным внутри <div> с атрибутом класса elementClass, и все это на любом уровне внутри элемента, имеющего значение атрибута ID #elementID.

Несколько различных селекторов могут быть записаны с использованием запятой для их разделения:

selector01, selector02 {
property: value;
}

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

Специфика выбора

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


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

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


Категории селекторов имеют вес по убыванию их значения:

  • ID. Включение в себя селекторов #id.

  • Class. Включение в себя селекторов .class и [атрибут], а также псевдоклассов.

  • Type. Включение в себя селекторов типов и псевдоэлементов.

  • Значение отсутствует. Универсальный селектор ( * ) и псевдокласс :where() не учитываются при вычислении веса.

Чтобы рассчитать вес селектора, добавьте один пункт к параметру ID - class - type для каждого элемента в категории, использованного при составлении селектора.

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


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


Так, например,

#elementID

Выбор имеет специфичность 1-0-0 и

div.classname01 > .classname02.classname03 span:first-of-type + [id="elementID"]

имеет специфичность 0-5-2 (так как его ID записан как селектор типа ).

Поскольку первый имеет 1 пункт в категории ID, 5 пунктов в CLASS и 2 пункта в TYPE для второго не имеют значения, так как в нем нет элементов ID. Выбор #elementID побеждает, несмотря на то, что он состоит только из одного элемента.


Не забывайте, что один из автогенерируемых классов компонента добавляется в начало вашего правила при компиляции CSS, что увеличивает его вес в категории CLASS на 1.


Выбор цели

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


Для лучшего понимания темы рекомендуется сначала прочитать статью Полезные инструменты браузера и раздел Структура веб-компонентов.


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

Допустим, вы хотите изменить внешний вид кнопки () Добавить Строку в компоненте Контекст.

  1. В Конструкторе UI добавьте компонент Контекст в инструментальную панель, щелкнув по нему в Палитре компонентов или перетащив его на макет.

  1. Откройте инструменты разработчика браузера, нажав F12 в Windows/Linux или Опция + ⌘ + I на Mac. Альтернативно можно щелкнуть правой кнопкой мыши в любом месте страницы и выбрать пункт Просмотреть код (или аналогичный) в появившемся контекстном меню.

  1. В инструментах разработчика включите инструмент Инспектор, доступный в левом верхнем углу открытого окна.

  2. При наведении курсора на кнопку () Добавить Строку. Классы элемента и другие подсказки вы уже видите в появившейся подсказке, но лучше все же щелкнуть по нему, чтобы проверить свойства CSS и убедиться, что это именно тот элемент, который нужно стилизовать.

  3. Изучите свойства Стиль элемента, выделенного в дереве документа. Это элемент <div> с атрибутом class="component-system-button square toolbar-add-row-button toolbar-button". Похоже, что это действительно правильный элемент, к которому нужно применить стили.

Внешний вид текущего элемента в основном обусловлен единственным правилом CSS, использующим селектор .component-system-button.square.

  1. Чтобы узнать, что отвечает за стиль элемента в наведенном состоянии, принудительно включите это состояние, открыв контекстное меню правым щелчком на элементе в дереве документа и выбрав состояние :hover из группы Установить состояние (или аналогичной).

Правило с селектором .toolbar-container .toolbar-button.square:hover появится в Списке стилей.

  1. В Конструкторе UI откройте редактор свойств кнопок компонента, наведя курсор на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося оверлея или выбрав его в Дереве компонентов.

  2. В редакторе свойств переключитесь на вкладку Свойства контейнера.

  1. На вкладке Свойства контейнера добавьте правило CSS с ранее замеченным селектором к свойству Стиль контейнера:

.component-system-button.square {
background-color: olive;
border-radius: 16px;
}

Попутно добавьте правило для состояния наведения:

.component-system-button.square:hover {
background-color: olivedrab;
}

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

  1. Свойство применяется, как только поле выходит из фокуса, и результат становится виден на приборной панели.