Стилизование HTML-элементов с определенными атрибутами
Возможно стилизовать элементы HTML, имеющие определенные атрибуты, а не только класс и ID.
Примечание: Internet Explorer 7 (и выше) поддерживает селекторы атрибутов только если указан !DOCTYPE. Селекторы атрибутов НЕ поддерживаются в IE6 и более ранних.
Селектор атрибутов
В приведенном ниже примере стилизованы все элементы с атрибутом title:
Пример 1
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
[title] { color:blue; }
</style>
</head>
<body>
<h2>Будет применено к:</h2>
<h1 title="Привет мир">Привет мир</h1>
<a title="Xhtml.co.il" href="http://Xhtml.co.il">Xhtml.co.il</a>
<hr />
<h2>НЕ будет применено к:</h2>
<p>Привет!</p>
</body>
</html>
Атрибут и значение селектора
В приведенном ниже примере стилизованны все элементы с title="Xhtml":
Пример 2
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
[title=Xhtml] { border:5px solid green; }
</style>
</head>
<body>
<h2>Будет применено к:</h2>
<img title="Xhtml" src="/images/xhtml-css.png" width="130" height="102" />
<br />
<a title="Xhtml" href="http://Xhtml.co.il">Xhtml.co.il</a>
<hr />
<h2>НЕ будет применено к:</h2>
<p title="greeting">Привет!</p>
<a class="Xhtml" href="http://Xhtml.co.il">Xhtml.co.il</a>
</body>
</html>
Атрибут и значение селектора - множественные значения
В приведенном ниже примере стилизованны все элементы с атрибутом title, который включает определенное значение. Это работает, даже если атрибут содержит пробел в качестве разделителя:
Пример 3
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
[title~=hello] { color:blue; }
</style>
</head>
<body>
<h2>Будет применено к:</h2>
<h1 title="hello world">Привет мир</h1>
<p title="student hello">Привет студенты CSS!</h1>
<hr />
<h2>НЕ будет применено к:</h2>
<p title="student">Привет студенты CSS!</p>
</body>
</html>
В приведенном ниже примере стилизованы все элементы с атрибутом lang, который включает указаное значение. Это работает, даже если атрибут содержит дефис ( - ) в качестве разделителя:
Пример 4
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
[lang|=en] { color:blue; }
</style>
</head>
<body>
<h2>Будет применено к:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr />
<h2>НЕ будет применено к:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<p lang="ru">Привет!</p>
</body>
</html>
Пример 5
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; }
input[type="button"] { width:120px; margin-left:35px; display:block; }
</style>
</head>
<body>
<form name="input" action="" method="get">
Имя:<input type="text" name="Name" value="Иван" size="20" />
Фамилия:<input type="text" name="Name" value="Коробейников" size="20" />
<input type="button" value="Пример кнопки" />
</body>
</html>
Была ли эта информация полезной?
