CSS Attribute Selectors
With attribute selectors, you can target and style HTML elements by an attribute, by an attribute value, or by both. They are written inside square brackets [].
Here are the ones CSS provides:
[attribute]- Matches elements that have the attribute[attribute="value"]- Matches elements whose attribute holds exactly that value[attribute~="value"]- Matches elements whose attribute value includes a specific word[attribute|="value"]- Matches elements whose attribute value is exactly the value, or begins with the value plus a hyphen (-)[attribute^="value"]- Matches elements whose attribute value begins with a specific value[attribute$="value"]- Matches elements whose attribute value finishes with a specific value[attribute*="value"]- Matches elements whose attribute value has a specific value somewhere inside it
Tip: Matching is case-sensitive by default. Adding an i before the closing bracket, as in [attribute="value" i], makes it case-insensitive.
CSS [attribute] Selector
Simply having the attribute is enough for [attribute] to match an element.
In the example below, it picks out every <a> element that has a target attribute:
Example
Each <a> element that has a target attribute gets a yellow background.
Output: complete HTML page
<!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"] Selector
With [attribute="value"], the attribute must also hold one exact value.
In the example below, only <a> elements carrying target="_blank" are matched:
Example
Only <a> elements carrying target="_blank" end up with the yellow background.
Output: complete HTML page
<!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"] Selector
Looking for one specific word within an attribute value is the purpose of [attribute~="value"].
In the example below, it matches elements whose title attribute is a space-separated list of words that includes "flower":
Example
A yellow border marks each element whose title attribute has the word "flower" in it.
Output: complete HTML page
<!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"] Selector
An element matches [attribute|="value"] when the attribute value equals the specific value, or begins with that value and a hyphen (-) right after it.
Note: A whole word is required, either on its own like top, or with a hyphen (-) after it like top-text.
Example
A yellow background goes on elements whose class attribute value is exactly "top" or begins with "top-".
Output: complete HTML page
<!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>