Attribute Selectors

From targeting elements based on their attributes to styling based on partial values, attribute selectors offer flexibility and control. Elevate your CSS skills as we dive into the nitty-gritty of attribute selectors.

• CSS 2 introduces attribute selectors for styling elements based on attributes and their values.
• Simple selectors style elements with specific attributes; multiple attributes can also be used.
• Exact value selectors apply styles based on specific attribute values.
• Partial-match selectors include pipe-equals and tilde-equals, matching values with hyphens or space-separated words.

RECOMMENDED ARTICLES

In CSS 2, attribute selectors were introduced. Attribute Selectors can be used to select elements based on their attributes and value of the attributes. 

There are four basic types of attribute Selectors.

These are simple attribute selectors, exact attribute value selectors, partial-match attribute value selectors, and leading-value attribute selectors.

Simple Attribute Selectors

It is possible to style HTML elements that have specific attributes. For example, in the code below we style the <a> element which has an attribute called target to have a red background. This means

Output

More than one attribute can also be used to select an element to style. 

For example, we can select the <a> element that has both href and target attribute using the style:

Output

Selecting an element using attribute and value

We can also select an element for styling by using the attribute and its value. 

For example, let’s say you want to boldface any hyperlink that points to a certain document on the web server. This would look something like the following:

Output

Combining more than one attribute and values

Just as we can combine more than one attributes, we can also combine more than one attributes and values. For example,

Output

The above will style the <a> element with the exact attributes

Note that ID selectors and attribute selectors that use the id attribute are not

exactly the same. That is, there exists difference between div#main-section and div[id=”main-section”].

Selection using Partial Attribute Values

You don’t have to know the exact attribute and value of an element before you use it to style the element. You can select element by knowing just some of the characters in the attribute or value.

(1) The Pipe-equals selector

This attribute selector selects an element which has the specified attribute and whose value is exactly the specified value, or the specified value followed by hyphen (-). For example,

Output

The first three <p> elements will appear red. The last <p> element has “greeting” characters in its value but it won’t be affected because there’s no hyphen between the “greeting” and “Anyday”. 

This attribute selector is commonly used to match language values.

(2) The tilde-equals Selector

This attribute selector selects an element which has the specified attribute and a specified word, or in space-separated value. For example,

Output

We observe that only the first and third <img> elements are targeted by the style because in the first, “language” is separated from preceding word by space, in the third, it’s only “language” which is not connected to any other word. In the second <img>, the word “language” is connected to “python” by hyphen so it’s not affected. 

The example above will match elements with title=~”object-oriented programming language”, title~=”language of choice”, but won’t match title ~=”best_language”.

(3) The asterisk-equals Selector

This attribute selector is used to select a substring in a value. It selects any string of characters in a value whether separated by space or hyphen or nothing at all. Note that value does not have to be a whole word. For example,

CSS [attribute*=”value”] Selector

Africa

America

Output

In the above example, only the first three elements have “an” in their attribute values so only they are targeted by the style. They have a yellow background as determined by the style. 

The asterisk-equals selector is typically used to match a section of name of a class.  

For example, if you have a pattern library where all section headings have classes like section-heading-1, section-heading-2, and so on, you could use [class*=”section-heading”] to target all elements with class names containing “section-heading”. This is particularly useful for styling elements that follow a consistent naming convention within your pattern library.

(4) The caret-equals Selector

This attribute selector is used to select a substring that begins the value. It selects the first string of character(s) in a value whether separated by space or hyphen or nothing at all. Note that the string does not have to be a whole word. It must however always be the starting characters in the value. For example,

Output

(5) The dollar-equals Selector

This attribute selector is used to select a substring that ends the value. It selects the last string of character(s) in a value.  Note that the string does not have to be a whole word. 

The typical application of this selection is using it to target and style particular file types. For example, the example below targets and styles jpg files.

Output

The second and fourth <img> elements are targeted and styled because their values for src end with the string “.jpg“. The padding : 10px allows a padding of 10px around the images that are .jpg and the background-color : yellow fills the background of these images ending .jpg with yellow color. Because of the padding, this yellow color is exposed around the images.

Case-insensitivity Identifier

The attribute values of html elements are case-sensitive. This means, “main” is different from “Main” or “MAIN”. 

The letter i is an identifier used to make attribute selectors case-insensitive. The i is put in the square bracket of the selector. For example, the below code selects all images with jpeg extension whether it’s jpeg, Jpeg or JPEG. 

img[ src$=”.jpg” i] 

Note that Case-insensitivity is a feature that can be used with all the attribute selectors such as *=, ^=, $=, etc

Case-insensitivity does not apply to attribute name

It is the attribute value that is made case-insensitive not the attribute name. This means the i identifier doesn’t affect the name but only the value. For example,

will not affect any of