Разноцветные теги

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

CSS селекторы

Мы можем написать CSS селекторы, применяемые по совпадению в URL адресе. Допустим, у нас есть тег 'resolved', мы хотим сделать его зелёным, для этого добавим CSS селектор в custom.css:

.ipsTags a[href*="/tags/resolved/"] {
    background: SeaGreen;
}
html[dir="ltr"] .ipsTags a[href*="/tags/resolved/"]:before {
	border-color: transparent SeaGreen transparent transparent;
}

Первый стиль является основной частью тега, второй предназначен для псевдоэлемента :before, предназначенный для точки перед тегом. 

Другой тег, который попробуем раскрасить - тег 'needs help'. В данном случае имеет место быть пробел между словами, который меняется при кодировании URL на символ '+'. Применим к тегу фиолетовый цвет:

.ipsTags a[href*="/tags/needs+help/"] {
    background: Purple;
}
html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before {
	border-color: transparent Purple transparent transparent;
}

Поддержка префиксов

Этот CSS селектор не меняет цвет префиксом, давайте исправим это - замените указанный выше код на этот:

.ipsTags a[href*="/tags/needs+help/"],
a.ipsTag_prefix[href*="?tags=needs+help"] {
    background: Purple;
}
html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before,
html[dir="ltr"] a.ipsTag_prefix[href*="?tags=needs+help"]:before {
	border-color: transparent Purple transparent transparent;
}

Обратите внимание!

Чтобы раскрашивать кириллические теги и префиксы, в атрибуте ahref селектора должен быть закодированный кириллический тег или префикс, т.к. кодирование URL подразумевает использование только латинский букв, цифр и нескольких знаков пунктуации. Например, слово 'форум' кодируется в '%D1%84%D0%BE%D1%80%D1%83%D0%BC'.