[attribute|=value]

Пример 1

Как стилизовать элементы, где значение атрибута lang начинается с "en":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
     [lang|=en] { background:yellow; }
</style>
</head>
<body>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<p><b>Примечание:</b> Для того, чтобы [<i>attribute</i>|=<i>value</i>] работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Определение и использование

Селектор [attribute|=value] стилизует элементы с указаным атрибутом начинающимся с определенного значения.

Примечание: Значение должно быть целым словом, либо самостоятельным, как lang="en", или продолжающимся с дефисом (-), как lang="en-us".

Поддержка браузеров

Селектор [attribute|=value] поддерживается во всех ведущих браузерах.

Примечание: Для того, чтобы [attribute|=value] работал в IE, необходимо указать <!DOCTYPE>.

Версия CSS

Селектор [attribute|=value] впервые представлен в: CSS 2

Связанные страницы

Пособие по CSS: CSS Селекторы атрибутов

Пример 2

Селектор [attribute|=value] конечно может быть использован для другого атрибута, чем "lang":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
     [class|=top] { background:yellow; }
</style>
</head>
<body>
<h1 class="top-header">Добро пожаловать</h1>
<p class="top-text">Привет мир!</p>
<p class="content">Вы учите CSS?</p>
<p><b>Примечание:</b> Для того, чтобы [<i>attribute</i>|=<i>value</i>] работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>