Hello World!š Welcome to the fifth and final article in my CSS series, Understanding CSS Selectors. In this article, we would be picking up from where we left off in our last article where we talked about Pseudo-Class Selectors and continuing with the attribute selectors; what they are and how to use them. Alright, letās head right into it.
What are Attribute Selectors?
Attribute Selectors are a class of CSS selectors that functions by matching or selecting elements based on the presence of an attribute or the value of an attribute.
For some of us who might not be too familiar with HTML, attributes are special words used in the opening tags to define additional or special properties or characteristics of the element. Attributes consist of a name and value pair, name=āvalueā. The value is always contained in quotation marks, but there are some attributes that do not have the name-value pair, these attributes are called Boolean attributes. Examples of some common ones are checked, disabled, readonly, required, etc.
Just like we saw in the last article, attribute selectors can be further divided into different types with each differing on how the selector is written, whilst still following the general syntax for declaring stylings which is the selector coming first followed by the property and value in the curly CSS brackets. Letās discuss these different types of attribute selectors.
Types of Attribute Selectors
- [attribute] Selector
This type of attribute selector is used to select all the elements that have the specified attribute and applies the CSS property to that attribute.
The example below selects every <a> element with href attribute in the HTML file and colours it red:
a[href]{
color: red;
}
- [attribute = "value"] Selector
This type of attribute selector is used to select all the elements which have a specific attribute that has a value that is exactly the same as the specified value and applies the CSS property to that attribute.
The example below selects every <a> element with href=ā#ā attribute in the HTML file and colours it purple:
a[href = "#"]{
color: purple;
}
- [attribute ~= "value"] Selector
This type of attribute selector is used to select all the elements that have the specified attribute, which in turn, has a value that is exactly the same as one of the values among a list of values separated by whitespace.
The example below selects every element with class attribute containing a whitespace-separated list with the word dogs in the HTML file:
a[class ~= "dogs"]{
color: lemon;
}
The example above will match elements with class = ādogsā, class = āanimals dogsā and class = ādogs animalsā but not class = ādogs-animalsā.
- [attribute |= "value"] Selector
This type of attribute selector is used to select any element which has the specified attribute whose value is exactly the same as the value or if it is followed immediately by a hyphen.
The example below selects every element with class attribute whose values begin with the word dogs or is followed by a hyphen(-), such as "dogs-purebred":
div[class |= "dogs"]{
color: lightblue;
}
- [attribute ^= "value"] Selector
This type of attribute selector is used to select any element which has the specified attribute whose value begins with the value that was specified in the selector. The value does not have to be the whole word or a whole word, it just has to begin the attribute value with those letters in that order.
The example below selects every element with a class attribute that has a value that begins with āseekeā.
div[class ^= "seeke"]{
font-style: italic;
}
- [attribute $= "value"] Selector
This type of attribute selector is the opposite of the [attribute^=āvalueā] selector and is used to select any element whose specified attribute has a value that ends with the value specified in the selector. The example below selects every element with a class attribute that has a value that ends with āersā.
div[class $= "ers"]{
font-style: oblique;
}
-[attribute *= "value"] Selector
This type of attribute selector is used to select elements whose attribute has the specified value in the selector anywhere in the attribute value in the HTML file. The example below selects every element that has a class attribute which contains āandā anywhere in the string which is the value of the attribute.
div[class *= "and"]{
font-weight: bold;
}
-[attribute operator value i] Selector
This type of attribute selector is similar to any of the selectors that have already been mentioned with an added feature of adding an i or I just before the closing bracket which causes the value specified in the selector to be compared irrespective of its case i.e. it is not case-sensitive. This attribute selector is supported by all browsers except Internet Explorer.
In the example below, all tags with href=āanonā will be selected regardless of capitalization. So, if the href value was Anon, aNon or anything else with the same letters but different capitalization, it would be valid.
a[href *= "anon" i]{
color: yello;
}
-[attribute operator value s] Selector
This type of attribute selector is the opposite of the [attribute operator value i] selector in that it compares the value specified in the selector as regards to its exact case, i.e. it is case-sensitive. This attribute selector is however still at the experimental stage and is not compatible with most browsers except with the current version of the Firefox Browser on Laptop and Mobile (Firefox 66.0). In the example below, all tags with exactly href*=āAnOnā.
a[href *= "AnOn" s]{
color: pink;
}
Why use Attribute Selectors?
If you are a bit familiar with CSS or you may have looked at some CSS code of other people, you would come to notice that the use of attribute selectors is not really common. Many people who write CSS do not often feel the need to use the attribute selectors arguing that the addition of another class or ID would just implement the same styling, but what this would go on to do is create a bogus CSS file with a lot of class or ID selectors which intention one would not be able to readily decipher from just looking at the codebase. One area where use of attribute selectors are helpful is in styling similar elements which have repeating attributes, letās see the example below, we have an unordered list of anchor tags with similar href values but which have been differentiated by using the rel attribute.
<ul>
<li><a href="#" rel="asean">Myanmar</a></li>
<li><a href="#" rel="ecowas">Mali</a></li>
<li><a href="#" rel="asean">Cambodia</a></li>
<li><a href="#">Kurdistan</a></li>
</ul>
We can then go on style the list items based on the rel attribute
li a[rel="asean"]{
font-weight: bold;
}
li a[rel="ecowas"]{
font-weight: italics;
}
One tricky part is that if the rel attribute involved has more than one attribute value, the conventional way of styling an attribute wonāt work but youāll have to use the ā~=ā combinator instead.
With all of these, we have finally come to the end of this CSS series and I believe it was very beneficial to you. It means a lot to me that you read all the articles to the very end, I am very grateful. I believe this series handled the fundamentals for navigating CSS quite well, with all the knowledge here, you can go on to create your own magic with CSS.
Go Legend. Ciao! ā¤ļøš¤