102. Селекторы атрибутов: по частичному значению

Например, в атрибуте class может быть несколько классов разделенных пробелом. Рассмотрим пример 1.

<span class = "red bold">Жирный, красный текст</span>

Например, нам нужно выбрать элементы, атрибут class которых содержит слово red. Это реализовано в примере два.

span[class ~= "red"] {
    color: red;
}

Вы, наверно, подумали, что проще написать как в третьем примере.

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 - любое значение.

Рассмотрим на основе восьмого примера:

<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 примере.

Похожие уроки и записи блога

1. При помощи селекторов атрибутов по частичному значению сделайте цвет текста всех div красным, кроме последнего (пятого). Например, div[title $= "12"]

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.