Селекторы атрибутов CSS
С помощью селекторов атрибутов можно выбирать и стилизовать HTML-элементы по атрибуту, по значению атрибута или по тому и другому. Они записываются в квадратных скобках [].
Вот какие селекторы есть в CSS:
[attribute]- Выбирает элементы, у которых есть этот атрибут[attribute="value"]- Выбирает элементы, атрибут которых содержит в точности это значение[attribute~="value"]- Выбирает элементы, значение атрибута которых включает определённое слово[attribute|="value"]- Выбирает элементы, значение атрибута которых точно равно указанному значению или начинается с этого значения и дефиса (-)[attribute^="value"]- Выбирает элементы, значение атрибута которых начинается с определённого значения[attribute$="value"]- Выбирает элементы, значение атрибута которых заканчивается определённым значением[attribute*="value"]- Выбирает элементы, значение атрибута которых где-либо содержит определённое значение
Совет: По умолчанию сопоставление чувствительно к регистру. Если добавить i перед закрывающей скобкой, как в [attribute="value" i], сопоставление будет выполняться без учёта регистра.
Селектор CSS [attribute]
Чтобы [attribute] выбрал элемент, достаточно самого наличия атрибута.
В примере ниже он выбирает каждый элемент <a> с атрибутом target:
Пример
Каждый элемент <a> с атрибутом target получает жёлтый фон.
Prompt
Продемонстрируйте селектор CSS [attribute]. Используйте селектор "a[target]", чтобы задать background-color: yellow на всех элементах , у которых есть атрибут target. Включите несколько ссылок, некоторые с атрибутом target, а некоторые без него, чтобы показать разницу.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute] Selector</title>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The [attribute] selector selects all elements with the specified attribute.</p>
<p>Links with a target attribute get a yellow background:</p>
<a href="https://prompt-cookbook.com">PromptCookbook.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><strong>Note:</strong> Only the links with a target attribute have a yellow background.</p>
</body>
</html>
Селектор CSS [attribute="value"]
При [attribute="value"] атрибут должен ещё и иметь одно точное значение.
В примере ниже выбираются только элементы <a> с target="_blank":
Пример
Жёлтый фон получают только элементы <a> с target="_blank".
Prompt
Продемонстрируйте селектор CSS [attribute="value"]. Используйте селектор a[target="_blank"], чтобы задать background-color: yellow на всех элементах с target="_blank". Включите несколько ссылок с разными значениями target (например, _blank, _self, _top) и некоторые без атрибута target, чтобы показать, что стилизуются только ссылки с target="_blank".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute="value"] Selector</title>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The [attribute="value"] selector selects elements with a specific attribute and an exact value.</p>
<p>Only links with target="_blank" get a yellow background:</p>
<a href="https://prompt-cookbook.com">PromptCookbook.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><strong>Note:</strong> Only the link with target="_blank" has a yellow background.</p>
</body>
</html>
Селектор CSS [attribute~="value"]
Поиск определённого слова в значении атрибута — назначение [attribute~="value"].
В примере ниже он выбирает элементы, у которых атрибут title представляет собой список слов, разделённых пробелами, включающий «flower»:
Пример
Жёлтая рамка отмечает каждый элемент, атрибут title которого содержит слово «flower».
Prompt
Продемонстрируйте селектор CSS [attribute~="value"]. Используйте селектор [title~="flower"], чтобы задать жёлтую сплошную рамку 5px на всех элементах, у которых атрибут title содержит слово «flower» как отдельное слово. Включите элементы с title="flower", title="summer flower", title="flower new", title="my-flower" и title="flowers", чтобы показать, что выбираются только совпадения целых слов, разделённых пробелами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute~="value"] Selector</title>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>The [attribute~="value"] selector selects elements with an attribute value containing a specific word.</p>
<img src="klematis.jpg" title="flower" width="224" height="162">
<img src="klematis2.jpg" title="summer flower" width="224" height="162">
<img src="klematis.jpg" title="flower new" width="224" height="162">
<img src="klematis2.jpg" title="my-flower" width="224" height="162">
<img src="klematis.jpg" title="flowers" width="224" height="162">
<p><strong>Note:</strong> The images with title="flower", title="summer flower", and title="flower new" get a yellow border.</p>
<p>The images with title="my-flower" and title="flowers" do <strong>not</strong> match, because "flower" is not a separate word in those values.</p>
</body>
</html>
Селектор CSS [attribute|="value"]
Элемент соответствует [attribute|="value"], когда значение атрибута равно указанному значению или начинается с этого значения и следующего сразу за ним дефиса (-).
Примечание: Требуется целое слово: либо отдельно, например top, либо с последующим дефисом (-), например top-text.
Пример
Жёлтый фон применяется к элементам, у которых значение атрибута class равно точно «top» или начинается с «top-».
Prompt
Продемонстрируйте селектор CSS [attribute|="value"]. Используйте селектор [class|="top"], чтобы задать background: yellow на элементах, у которых значение атрибута class равно точно «top» или начинается с «top», за которым следует дефис. Включите элементы с class="top", class="top-text", class="top-header", class="topcontent" и class="content", чтобы показать, какие из них совпадают.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute|="value"] Selector</title>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<p>The [attribute|="value"] selector selects elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).</p>
<h1 class="top-header">Welcome</h1>
<p class="top">This paragraph has class="top".</p>
<p class="top-text">This paragraph has class="top-text".</p>
<p class="topcontent">This paragraph has class="topcontent".</p>
<p class="content">This paragraph has class="content".</p>
<p><strong>Note:</strong> The elements with class="top" and class="top-header" and class="top-text" get a yellow background. The value has to be a whole word, either alone or followed by a hyphen.</p>
</body>
</html>