Introduction to CSS Attribute Selector
An attribute selector in CSS is used to select any HTML elements with some specific attribute value or attribute. This is a wonderful way to style any HTML elements by using attribute selector to group them based on some unique attributes and the unique attribute selector which is selecting those elements with the same attribute values or attributes.
Real-time Example: We know that styles the HTML elements with their tag names, class names, ID names, etc. This all will apply the settings to the entire tag or entire class or entire id names within the page. But if I have a situation like I want to apply styles to tag name but only a few of them then we simply take their attribute name within index brackets([]). So that it can apply those settings tag name and attribute name matched elements only.
How does Attribute Selector work in CSS?
CSS attribute selector is working based on attribute value given to a specific selector. Their several types to achieve these attribute selectors. They are:
1. [attribute] Selector
This is used to select HTML elements with 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 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 required attribute value contains 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 value starting with 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 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 is used to style the HTML elements according to their selector name and attribute name and attribute value. Using this attribute selector we can style the elements like starting word, ending word, in between word of attributes.
Recommended Articles
This is a guide to CSS Attribute Selector. Here we discuss an introduction to CSS Attribute Selector, how does it work along with the examples for better understanding. You can also go through our other related articles to learn more –
