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. In our last article we discussed about Types of CSS Selectors

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.

How does Attribute Selector work in CSS?

CSS attribute selector is operating based on attribute preference given to a specific selector.

CSS Attribute Selectors

1.[attribute] Selector
2.[attribute~="value"] Selector
3.[attribute="value"] Selector
4.[Attribute$=” value”] selector
5.[attribute*="value"] Selector

[attribute] Selector

This is used 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 used to pick HTML elements with wanted attribute value holds a given word anyplace in the selector.

<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

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

[Attribute$=” value”] selector

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

[attribute*="value"] Selector

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

I shared this post from CSS Attribute Selectors you can read in detail from there.

If you have any question please help to improve. Thank you.