CSS Attribute Selectors: The CSS attribute selectors provides a simple and amazing approach to apply the styles on HTML elements dependent on the presence of a specific attribute or attribute value.
You can create an attribute selector by putting the attribute—optionally with a value—in a couple of square brackets. You can likewise put an element type selector before it.
In this tutorial, you will learn-
In this article, you will learn-
- 1 Style HTML Elements With Specific Attributes
- 2 CSS [attribute] Selector
- 3 CSS [attribute=”value”] Selector
- 4 CSS [attribute~=”value”] Selector
- 5 CSS [attribute|=”value”] Selector
- 6 CSS [attribute^=”value”] Selector
- 7 CSS [attribute$=”value”] Selector
- 8 CSS [attribute*=”value”] Selector
- 9 Styling Forms
- 10 Styling Forms
- 11 All CSS Attribute Selectors
Style HTML Elements With Specific Attributes
It is feasible to style HTML elements that have specific attributes or attribute values.
CSS [attribute] Selector
The [attribute] selector is used to choose elements with a specified attribute.
The accompanying example chooses all <a> elements with a target attribute:
Example
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.worldofitech.com">worldofitech.com</a>
<a href="https://www.techsplatform.com" target="_blank">techsplatform.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
CSS [attribute=”value”] Selector
The [attribute=”value”] selector is used to choose elements with a specified attribute and value.
The accompanying example chooses all elements with a target=”_blank” attribute:
Example
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.worldofitech.com">worldofitech.co</a>
<a href="https://www.techsplatform.com" target="_blank">techsplatform.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
CSS [attribute~=”value”] Selector
The [attribute~=”value”] selector is used to choose elements with an attribute value containing a specified word.
The accompanying example chooses all elements with a title attribute that contains a space-separated list of words, one of which is “flower”:
Example
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
The example above will match elements with title=”flower”, title=”summer flower”, and title=”flower new”, however not title=”my-flower” or title=”flowers”.
CSS [attribute|=”value”] Selector
The [attribute|=”value”] selector is used to choose elements with the specified attribute beginning with the specified value.
The accompanying example chooses all elements with a class attribute value that starts with “top”:
Note: The value must be an entire word, either alone, as class=”top”, or followed by a hyphen( – ), like class=”top-text”!
Example
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
CSS [attribute^=”value”] Selector
The [attribute^=”value”] selector is used to choose elements whose attribute value starts with a specified value.
The accompanying example chooses all elements with a class attribute value that starts with “top”:
Note: The value doesn’t have to be an entire word!
Example
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
CSS [attribute$=”value”] Selector
The [attribute$=”value”] selector is used to choose elements whose attribute value closes with a specified value.
The accompanying example chooses all elements with a class attribute value that finishes with “test”:
Note: The value doesn’t have to be an entire word!
Example
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
CSS [attribute*=”value”] Selector
The [attribute*=”value”] selector is used to choose elements whose attribute value contains a specified value.
The accompanying example chooses all elements with a class attribute value that contains “te”:
Note: The value doesn’t have to be an entire word!
Example
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Styling Forms
The attribute selectors can be useful for styling forms without class or ID:
Styling Forms
Example
<!DOCTYPE html>
<html>
<head>
<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>
<h2>Styling Forms</h2>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Salman" size="20">
Lastname:<input type="text" name="Name" value="Khan" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
All CSS Attribute Selectors
| Selector | Example | Example description |
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target=”_blank” |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word “flower” |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with “en” |
| [attribute^=value] | a[href^=”https”] | Selects every <a> element whose href attribute value begins with “https” |
| [attribute$=value] | a[href$=”.pdf”] | Selects every <a> element whose href attribute value ends with “.pdf” |
| [attribute*=value] | a[href*=”worldofitech”] | Selects every <a> element whose href attribute value contains the substring “worldofitech” |
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
