Updated June 27, 2023
Introduction to CSS Attribute Selector
An attribute selector in CSS selects any HTML elements with some specific attribute value or attribute. This is a wonderful way to style HTML elements by using an attribute selector to group them based on some unique attributes and the unique attribute selector, which selects those elements with the same attribute values or attributes.
Real-time Example: We know that developers style HTML elements using their tag names, class names, ID names, etc. This will apply the settings to the entire tag, class, or id names within the page. But if I have a situation like I want to use styles to tag names but only a few of them, then we take their attribute name within index brackets([]). So that it can apply those settings to tag names and attribute name-matched elements only.
How does Attribute Selector work in CSS?
CSS attribute selector works based on the attribute value given to a specific selector. Their several types to achieve these attribute selectors. They are:
1. [attribute] Selector
Developers use this to select HTML elements that have the required attribute only.
Code:
a[target] { //This will color the a tag with target attribute
color: blue;
}
<a href=""/>
<a href="" target="">
<a href="" target="">2. [attribute=”value”] Selector
This is used to select HTML elements with the required attribute and value.
Code:
a[target="_blank"] { //This will color the a tag with target attribute and value
color: blue;
}
<a href=""/>
<a href="" target="_blank">
<a href="" target="_blank">3. [attribute~=”value”] Selector
This is used to select HTML elements with the required attribute value containing a given word anywhere in the selector.
Code:
[title~=para] { //This will color the a tag with title attribute value as specified word
color: blue;
}
<p title="hello_para"/>
<p title="_blank_para">4. [attribute|=”value”] Selector
This is used to select HTML elements whose attribute values start with the specified value.
Code:
[class!=apple] { //This will color the a tag with class attribute value as starting with specified value
color: blue;
}
<p class="apple_pink"/>
<p class="" title="apple_red">5. [attribute^=”value”] Selector
This is used to select HTML elements whose attribute value begins with the specified value.
Code:
[class!="hi"] { //This will color the a tag with class attribute value as begins with specified string
color: blue;
}
<p class="hi_pink"/>
<p class="" title="hi_red">6. [attribute$=”value”] Selector
This is used to select HTML elements whose attribute value ends with the specified value.
Code:
[class$="hello"] { //This will color the a tag with class attribute value as ends with specified string
color: blue;
}
<p class="hi_hello"/>
<p class="I_am_hello"/>7. [attribute*=”value”] Selector
This is used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.
Code:
[class*="am"] { //This will color the a tag with class attribute contains specified value anywhere
color: blue;
}
<p class="gaming"/>
<p class="games"/>Examples to Implement CSS Attribute Selector
Below are some examples mentioned:
1. [Attribute] selector
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p[class] {/*styles applied to all paragraphs which have class attribute*/
color: red;
border: 2px solid green;
font-size: 20px;
}
h1
{
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>[attribute] Selector demo</h1>
<p class="p">1. [attribute] Selector: This is used to select HTML elements with required attribute only.</p>
<p>1. [attribute] Selector: This is used to select HTML elements with required attribute only.</p>
<p class="p">1. [attribute] Selector: This is used to select HTML elements with required attribute only.</p>
</body>
</html>Output:
2. [Attribute=”value”] selector
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p[class="p"] {/*styles applied to all paragraphs with value as p which have class attribute*/
color: brown;
border: 2px dashed orange;
font-size: 20px;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>[attribute="value"] Selector demo</h1>
<p class="p">2. [attribute="value"] Selector: This is used to select HTML elements with required attribute and value.</p>
<p>2. [attribute="value"] Selector: This is used to select HTML elements with required attribute and value.</p>
<p class="p">2. [attribute="value"] Selector: This is used to select HTML elements with required attribute and value.</p>
</body>
</html>Output:
3. [Attribute~=” value”] selector
Code:
<!DOCTYPE html>
<html>
<head>
<style>
[class~=para] {/*styles applied to all paragraphs with value as para which have class attribute*/
color: navy;
border: 2px dotted brown;
font-size: 20px;
}
h1
{
color: maroon;
text-align: center;
}
</style>
</head>
<body>
<h1>[attribute~=value] Selector demo</h1>
<p class="educba para">3. [attribute="value"] Selector: This is used to select HTML elements with required attribute and value.</p>
<p>3. [attribute="value"] Selector: This is used to select HTML elements with required attribute and value.</p>
<p class="particles para">3. [attribute="value"] Selector: This is used to select HTML elements with required attribute and value.</p>
</body>
</html>Output:
4. [Attribute^=” value”] selector
Code:
<!DOCTYPE html>
<html>
<head>
<style>
[class^="para"] {/*styles applied to all paragraphs starting with value as para which have class attribute*/
color: red;
background-color: lightgray;
border: 2px dotted green;
font-size: 22px;
}
h1
{
color: fuchsia;
text-align: center;
}
</style>
</head>
<body>
<body>
<h1>[attribute^="value"] Selector demo</h1>
<p class="para_educba">4. [attribute|="value"] Selector: This is used to select HTML elements whose attribute value starting with specified value.</p>
<p>4. [attribute|="value"] Selector: This is used to select HTML elements whose attribute value starting with specified value.</p>
<p class="para_particles">4. [attribute|="value"] Selector: This is used to select HTML elements whose attribute value starting with specified value.</p>
</body>
</html>Output:
5. [Attribute$=” value”] selector
Code:
<!DOCTYPE html>
<html>
<head>
<style>
[class$="para"] {/*styles applied to all paragraphs ending with value as para which have class attribute*/
color: green;
background-color: lightblue;
border: 2px ridge brown;
font-size: 22px;
}
h1
{
color: maroon;
text-align: center;
}
</style>
</head>
<body>
<body>
<h1>[attribute$="value"] Selector demo</h1>
<p class="educba_para">5. [attribute$="value"] Selector: This is used to select HTML elements whose attribute value ends with specified value.</p>
<p>5. [attribute$="value"] Selector: This is used to select HTML elements whose attribute value ends with specified value.</p>
<p class="particlespara">5.[attribute$="value"] Selector: This is used to select HTML elements whose attribute value ends with specified value.</p>
</body>
</html>Output:
6. [Attribute*=” value”] selector
Code:
<!DOCTYPE html>
<html>
<head>
<style>
[class*="para"] {/*styles applied to all paragraphs with value as para where ever in paragraph which have class attribute*/
color: blue;
background-color: lightgreen;
border: 2px ridge brown;
font-size: 22px;
}
h1
{
color: fuchsia;
text-align: center;
}
</style>
</head>
<body>
<body>
<h1>[attribute*="value"] Selector demo</h1>
<p class="educba_para_particles">6. [attribute*="value"] Selector: This is used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.</p>
<p>6. [attribute*="value"] Selector: This is used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.</p>
<p class="particlespara_pink">6. [attribute*="value"] Selector: This is used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.</p>
</body>
</html>Output:
Conclusion
Attribute selector in CSS style the HTML elements according to their selector name, attribute name, and attribute value. Using this attribute selector, we can style the elements like starting and ending words between the attributes’ words.
Recommended Articles
We hope that this EDUCBA information on “CSS Attribute Selector” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
