Understanding CSS Attribute Selectors
CSS
Payal Pansuriya
In HTML and CSS, an attribute selector is used to select any element with a specific attribute or value. This is a great way to style HTML elements by grouping them based on some specific features, and the feature selector will select elements with similar elements.
In CSS LifeStyle Example: We know that styling HTML elements with their tag names, class names, ID names, etc. This all will apply the changes to all tags or all classes or all ID names within the page. But if I have a situation where I want to apply styles to a tag name but only a few of them we just name their attribute in the indexing bracket. Therefore that it can only apply those changes to matching tag name and attribute name matching elements.
Here are 7 CSS Attribute Selector Syntax:
- [attribute]
- [attribute=value]
- [attribute~=value]
- [attribute|=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
1) [attribute] Selector only used to select HTML elements with the required attribute.
// This will color the tag with a title attribute.
a[title] {
color: yellow;
}
<a href=”” title=””>2) [attribute=value] Selector used to select HTML elements with required attribute and value.
// This is used to select HTML elements with the required target and _blank.
a[target=”_blank”] {
color: yellow;
}
<a href=”” target=”_blank”>3) [attribute~=”value”] Selector used to select HTML elements with required attribute value contains a given word anywhere in the selector.
// This will color the tag with title attribute value as a para word.
[title~=para] {
color: yellow;
}
<p title=”hello_para”/>
<p title=”_blank_para”>4) [attribute|=”value”] Selector used to select HTML elements whose attribute value starting with specified value.
//This will color the tag with class attribute value as starting with the specified value
.
[class!=mango] {
color: blue;
}
<p class=”mango_yellow”/>
<p class=”” title=”mango_red”>5) [attribute^=”value”] Selector used to select HTML elements whose attribute value begins with the specified value.
// This will color the tag with class attribute value as start with the specified string
.
[class!=”there”] {
color: blue;
}
<p class=”there_yellow” />
<p class=”” title=”there_red” />6) [attribute$=”value”] Selector used to select HTML elements whose attribute value ends with the specified value.
//This will color the tag with class attribute value as ends with the hello string
.
[class$=”hello”] {
color: blue;
}
<p class=”hi_there_hello” />
<p class=”I_am_hello” />7) *[attribute=”value”] Selector** used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.
//This will color the tag with class attribute contains specified value anywhere
.
[class*=”am”] {
color: blue;
}
<p class=”gaming”/>
<p class=”games”/>
