Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
88. Селекторы атрибутов: по частичному значению
Например, в атрибуте class
может быть несколько классов разделенных пробелом. Рассмотрим пример 1.
<span class = "red bold">Жирный, красный текст</span>
Например, нам нужно выбрать элементы, атрибут class
которых содержит слово red
. Это реализовано в примере два.
span[class ~= "red"] {
color: red;
}
span
и [
нет пробела! Обратите на это внимание!Вы, наверно, подумали, что проще написать как в третьем примере.
span.red {
color: red;
}
Да, в третьем примере проще и правильнее. Поэтому пример с классами не подходит, рассмотрим следующий пример. Пример четвертый.
<span title = "Крутой физик">Альберт Эйнштейн</span>
<span title = "Еще один физик">Никола Тесла</span>
Выделим жирным начертанием физиков. Будем искать слово «физик
» в атрибуте title
. Обратите внимание на то, что регистр имеет значение.
span[title ~= "физик"] {
font-weight: bold;
}
Для проверки можете написать как в шестом или седьмом примере. В таком случае будет выделен только Тесла.
span[title ~= "Еще"] {
font-weight: bold;
}
span[title ~= "один"] {
font-weight: bold;
}
Другие селекторы атрибутов по частичному значению
Ниже представлена таблица дополнительных селекторов атрибутов по подстроке. Где atr
- любой атрибут, val
- любое значение.
[atr ^= "val"] |
Атрибут atr , значение которого начинается на val |
[atr $= "val"] |
Атрибут atr , значение которого заканчивается на val |
[atr *= "val"] |
Атрибут atr , значение которого содержит val |
Рассмотрим на основе восьмого примера:
<div class = "value">привет</div>
div[class ^= "val"] {
font-weight: bold;
}
div[class $= "val"] {
font-weight: bold;
}
div[class *= "val"] {
font-weight: bold;
}
В девятом примере подстрока val
будет найдена. В десятом примере подстрока val
не будет найдена. В 11 примере подстрока val
будет найдена. Рассмотрим 12 пример.
<div class = "max_val">привет</div>
Теперь div[class $= "val"]
сработает в 12 примере.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- При помощи селекторов атрибутов по частичному значению сделайте цвет текста всех
div
красным, кроме последнего (пятого). Например,div[title $= "12"]
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.