Understanding CSS Selectors: Attribute Selectors

Hello World!😀 Welcome to the fifth article in my CSS series, Understanding CSS Selectors. In this article, we would be delving into 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 which 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 which don’t 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 where we discussed pseudo-class selectors, 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 brackets. Let’s discuss these different 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 which 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:

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 which 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:

div[class~="dogs"]{
  color: brown;
}

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 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(-), "dogs-purebred":

div[class|="dogs"]{
  color: royal blue;
}

• [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.
The example below selects every element with a class attribute which has a value that begins with “seek”.

div[class^="seek"]{
  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 which ends with the value specified in the selector.
The example below selects every element with a class attribute which has a value that ends with “er”.

div[class$="er"]{
  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 brackets 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: yellow;
}

• [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 in experimental stages 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 and 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 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 attribute selectors are very useful 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 attrribute

li a[rel="asean"]{
  font-weight: bold;
}

li a[rel="ecowas"]{
  font-style: 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, with all the knowledge here, you can go to create magic with CSS.

Go Legend. Ciao! ❤️