CSS Attribute Selectors

CSS Attribute Selectors. An attribute selector in CSS is utilized to pick any HTML elements with some particular attribute value or attribute. This is an excellent technique to style any HTML elements by making an attribute selector arrange them based on some single attributes and the single attribute selectors which is selecting those elements with the same attribute values or attributes.

Read Also: What is CSS?

Example:  As we know that styles the HTML tags with their tag names, ID names, class names, etc. These will apply the settings to the complete tag or complete class or complete id names within the page. But if I hold a situation like I desire to apply styles to tag name but just a few of them later we simply use their attribute name within index brackets([]). So that it can use those settings element name and attribute name matched elements only.

Read Also: Introduction to CSS Controls.

How does Attribute Selector work in CSS?

CSS attribute selector is operating based on attribute preference given to a specific selector. Their some types to achieve these attribute selectors. They are:

CSS Attribute Selectors

[attribute] Selector

This is utilized to pick an HTML tag with the wanted attribute only.

<a href="#">Home</a>
<a href="#" target="">Services</a>
<style>
a[target] { /*This will color the a tag with target attribute*/
color: blue;
}</style>

[attribute~=”value”] Selector

This is utilized to pick HTML elements with wanted attribute value holds a given word anyplace in the selector.

Read Also: Types of CSS Selectors

<style>
[class~=soft] {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft">Attribute ~ Selector:  This is utilized to select HTML elements with needed attribute and value.</p>

[attribute=”value”] Selector

This is utilized to pick HTML tag with wanted attribute and value.

<style>
p[class="psoft {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft">Atribule Value Selector:  This is utilized to select HTML elements with needed  attribute and value.</p>

[Attribute$=” value”] selector

This is utilized to select HTML tags whose attribute value ends with named value.

<style>
[class$="soft"] {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft"> Attribute $ Selector: This is utlized to select HTML tags whose attribute value ends with particular value.</p>

[attribute^=”value”] Selector

This is utilized to pick an HTML tag whose attribute value starts with the named value.

<style>
[class^="soft"] {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft"> Aattribute ^ Selector:  This is utlized to select HTML tag whose attribute value begins with particular value.</p>

[attribute*=”value”] Selector

This is utilized to pick an HTML tag whose attribute value holds specified value anyplace in the attribute value.

<style>
[class*="soft"] {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft"> Aattribute * Selector:  This is used to select HTML elements whose attribute value starting with specified value anywhere in the attribute.</p>

Conclusion

CSS Attribute selector in CSS is utilized to style the HTML elements according to their selector name and attribute name and attribute value. Utilizing this attribute selector we can style the tags like starting word, between work, ending word, of attributes.