Селекторы атрибутов CSS

Последнее обновление 8 мая 2019 11:45:23 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Селекторы атрибутов

Селекторы атрибутов CSS описывают стили, которые применимы к соответствующим атрибутам или значениям атрибутов (полностью или частично) элементов HTML-страницы.

Типы селекторов атрибутов

Типы	Описания
[Атрибут]	Выбирает элемент (ы) с соответствующим именем атрибута.
[Атрибут = "значение"]	Выбирает элемент (ы) с соответствующим значением атрибута.
[Атрибут ~ = "значение"]	Выбирает элемент (ы), чье имя атрибута и одно из слов из списка слов, разделенных пробелами, совпадают, где список слов, разделенных пробелами, является значением атрибута. Если значение является пробелом или пустой строкой, оно ничего не выбирает.
[Атрибут \| = значение]	Выбирает элемент (ы), чье имя атрибута совпадает, и значение атрибута либо совпадает с «val», либо начинается с «val», за которым сразу следует «-» (то есть дефис). Это предназначено для выбора элементов с субкодом языка (например, en-US).

Синтаксис CSS [атрибут] селектор атрибута

 [name_of_the_attribute] {CSS-Property: value; ........................}

Заметка

Для всех селекторов атрибутов CSS обязательным является включение селектора с помощью «[» и «]».

Пример селекторов атрибутов CSS [attribute]

Код CSS:

[title] {
color: red; /* sets color to red */
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute] attribute selectors</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute]-attribute-selector.css' type='text/css'>
</head>
<body>
<p title="example of CSS attribute selector"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<a href="css/selector/CSS-attribute-selector.php" title=" CSS attribute selector">CSS attribute Selector</a>
</div>
</body>
</html>

Посмотреть этот пример селектора атрибутов CSS [attribute] в отдельном окне браузера.

Синтаксис CSS [attribute = "value"] атрибут селектора

 [name_of_the_attribute = "value_of_the_attribute"] {CSS-Property: value; ........................}

Пример селекторов атрибутов CSS [attribute = "value"]

Код CSS:

 [title="w3resource"] {
color: red; /* sets color to red */ 
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute="value"] attribute selectors</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute=value]-attribute-selector.css' type='text/css'>
</head>
<body>
<p title="w3resource"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<a href="css/selector/CSS-attribute-selector.php" title="w3resource">CSS attribute Selector</a>
<a href="css/selector/CSS-selectors.php" title="w3resource CSS selector ">CSS Selector</a> <!--this element is not going to be selected, since the value of teh attribute does not match-->
</div>
</body>
</html>

Посмотрите этот пример селектора атрибутов CSS [attribute = "value"] в отдельном окне браузера.

Синтаксис CSS [attribute ~ = "value"] атрибут селектора

 [name_of_the_attribute = ~ "value"] {CSS-Property: value; ........................}

Где значение атрибута выбранного элемента представляет собой список слов, разделенных пробелами, и одно из слов соответствует значению .

Пример селектора атрибутов CSS [attribute ~ = "value"]

Код CSS:

 [title~="w3resource"] {
color: red; /* sets color to red */
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute~="value"] attribute selector</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute~=value]-attribute-selector.css' type='text/css'>
</head>
<body>
<p title="w3resource tutorials "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<a href="css/selector/CSS-attribute-selector.php" title="w3resource CSS tutorials ">CSS attribute Selector</a>
<a href="css/selector/CSS-selectors.php" title="CSS selector tutorials ">CSS Selector</a> <!--this element is not going to be selected, since any of teh words does not match w3resource-->
</div>
</body>
</html>

Посмотреть этот пример селектора атрибутов CSS [attribute ~ = "value"] в отдельном окне браузера.

Синтаксис CSS [attribute | = "value"] атрибут селектора

 [name_of_the_attribute | = "value"] {CSS-Property: value; ........................}

Где значение атрибута выбранного элемента начинается со значения и сразу за ним следует «_».

Пример селектора атрибутов CSS [attribute | = "value"]

Код CSS:

[lang|="en"] {
color: red; /* sets color to red */
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute|="value"] attribute selector</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute|=value]-attribute-selector.css' type='text/css'>
</head>
<body>
<p lang="en-US" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<p lang="fr">Ce paragraphe est en français.</p><!--this is going to be hidden--> 
</div>
</body>
</html>

Посмотреть этот пример селектора атрибутов CSS [attribute | = "value"] в отдельном окне браузера.

Предыдущий: CSS соседние селекторы
Далее: селекторы классов CSS