CSS helps us to style elements with specific attributes. The attribute selector is used for this purpose. It styles the HTML elements that have particular attributes or attribute values.
Attributes Selector
We use the [attribute] selector to select elements with a specified attribute. For example, we can style all <a> elements that specify the ‘target’ attribute
1 2 3 4 | a[target] { background-color: red; } |
Attribute Value Selector
Here, you mention the selector as [attribute=”value”] to select elements that have a specified value for an attribute.
For instance, if you want to style all <a> elements with a ‘target=”style1″
1 2 3 | a[target="_blank"]{ background-color: red; } |
Attribute Values Selector with specific word
You can also specify a word that should be in the attribute value for it to be styled. For this, we use [attribute~=”value”] selector.
So, if you want to style all the <a> tags with “special” in their target values (like target= “style special”, target= “special anchor” etc.) then you can use the selector a[target ~target= “special”].
Note that, here the specified value needs to be a whole separate word and not a part of it. Therefore, ‘style special’ and ‘special anchor’ are fine but ‘speciality’ and ‘first-special’ won’t be selected.
You can also specify the positions of the words as:
[attribute|= “value”] to select attributes whose values starts with a specified word. Here, the given “value” should be a whole word or separated by hyphen.
[attribute^= “value”] is similar to the above selector, except, here the value doesn’t have to be a full word. It can be a substring. Thus, here “special style” and “specialityCSS” both are fine.
[attribute$= “value”] is the opposite of the [attribute^= “value”] selector. Here, the attribute value has to end with the specified string which may or may not be a whole word.
[attribute*= “value”] is similar the [attribute ~=value] selector except that the specified value can be a substring instead of a whole world so even “thespecialtag” would work.