Attribute selectors in CSS allows you to select DOM elements based on the attributes they contain as well as the values of those attributes. We have explored different types of attribute selectors.

An HTML attribute provides additional information about an HTML element. There are various types of attributes and examples of few of commonly used attributes are-

1. The href Attribute-"HREF" stands for Hypertext Reference. HTML links are defined with the "a" tag. The link address is specified in the href attribute:

<a href="https://www.google.com">This is a link</a>

2. The src Attribute- "SRC" stands for source. HTML images are defined with the "img" tag. The filename or the URL of the image source is specified in the src attribute:

<img src="dummy.jpg">

3. The width and height Attributes- In HTML, images also have width and height attributes which is used to change or modify the dimensions of the image in the source tag, which specifies the width and height of the image:

<img src="dummy.jpg" width="500" height="600">

4. The alt Attribute- "ALT" attribute stands for alternative text. The alt attribute specifies an alternative text to be used, if an image cannot be displayed. The value of the alt attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a vision impaired person, can "hear" the element. This enables specially-abled person to view the website as well using screen readers.

<img src="dummy.jpg" alt="A dummy image with these features">

What are Attribute Selectors in CSS then?

Attribute selectors allows you to select elements based on the attributes they contain as well as the values of those attributes. Accessibility standards are starting to make semantic attributes more common. These methods add another layer of semantics onto the HTML mark-up and can also be used to access those elements semantically in CSS. This type of selection were made popularised after the development of Semantic HTML5.

• attr — attribute presence- This selector finds and selects any element or HTML tag that contains a particular attribute, regardless of its value which means value is not taken into consideration, selection is done only on the basis of the name or type of the attribute. Example: Select all links that contain the rel or html attributes:

a[rel]{
    background-color: #ccc;
}

• attr=val – attribute value matches val- This selector finds and selects the HTML tag which contains the particular value of an attribute exactly. (attr="val" and only "val"). This type of selector also takes the value of the attribute into consideration. Example: Select all text input form elements:

input[type=text]{
    background: #eee;
}

• attr~=val – attribute value includes val- This selects any HTML elements with an attribute (attr) that contains a list of multiple values in that HTML tag when one of which is val. This selector is used for these types of attributes and allows you to state that one of the values is "val". Example: In the previous example, we added an identifying image to link elements with the rel="external" attribute. But what if the rel attribute contained more than one value? In that case, we could do this:

a[rel~=external]{
    background: url('images/external.png') right center no-repeat;
    padding-right: 15px;
}

• attr|=val – attribute value matches or starts with val- This selector is a bit more unclear and confusing than the other tags. It is made to be used for attributes that specify a language. For example, variations of English might be specified as en-US or en-GB or just en. The "attr|=val" selector would allow you to select any of those options, as long as they start with en. Example: select links with the lang attribute starting with fr, and add an icon. This would be useful if you link to pages in another language, and want to let your visitors know what to expect.

a[lang|=fr] {
    background: url('images/french.gif') right center no-repeat;
    padding-right: 25px;
}

• att^=val – attribute value starts with val- This is the first of three substring matching attribute selectors. These allow you to select part of an attribute value. The "att^=val" states that the value must start with the value specified. Example: Continuing with identifying certain links with icons, here we can add an icon to any links that point to secure pages:

a[href^=https] {
    background: url('images/secure.gif') right center no-repeat;
    padding-right: 18px;
}

• att$=val – attribute value ends with val- This selector selects the HTML tags in which attributes states that the value must end with the value specified. Example: Add an icon to all links to PDF files:

a[href$=pdf] {
    background: url('images/pdf.png') right center no-repeat;
    padding-right: 20px;
}

• att=val – attribute value contains val- This selector states that the attribute value must contain the value specified. This can be anywhere in the attribute value – at the start, at the end, or in the middle. Example: Imagine you link to a particular site often. Here at A Padded Cell, we have a lot of articles and tutorials on OpenGenus. Let's imagine we want to add an icon to any links that point to opengenus.org.

a[href*="opengenus.org"] {
    background: url('images/dummy.png') right center no-repeat;
    padding-right: 20px;
}

Time for testing your skills.

With this article at OpenGenus, you must have the complete idea of Different types of Attribute Selectors in CSS. Enjoy.