CSS Attribute Selectors Tutorial
Tags: css, webdev, beginners, tutorial
Published: 2022-07-07 01:46:56

In this article, we’ll be learning all about attribute selectors. If you remember from HTML, elements can have attributes that give extra details.

An `a` tag with an `href` attribute:
![Href attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7buy4uqeqyq9mdc0pa8.png)
We use CSS attribute selectors to target these elements with their specific attributes. For example:
![Specific Attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsgvcem2bs8nibsmfdea.png)
Here we have an **exact match** selector, it will only select links with the **exact** `href` attribute value of "https://rembertdesigns.co".

So let’s learn how to use these very useful selectors!

## Types of attribute selectors
There are many different types of attribute selectors, which are classified as either presence and value selectors or substring matching selectors.

The syntax for each selector starts with the attribute name and ends with an equals sign followed by the attribute value(s), usually in quotes.

It’s what goes between the attribute name and equals sign, that determines the selector type!

## Presence and value selectors
These selectors will select an element based on the presence of an attribute alone (e.g. `href`), or on various different matches against the value of the attribute.

`[attr]` _The attribute itself_.

Matches all elements with an attribute name of _attr_. Such as `a[title]`.

`[attr=”value”]` _The attribute has this exact value_.

Matches all elements with an attribute name of _attr_ whose value is **exactly** _value_ — the string inside the quotes. Such as `a[href="https://rembertdesigns.co"]`.

`[attr~=”value”]` _The attribute has this value in a space-separated list_.

Matches elements with an attribute name of _attr_ whose value is exactly _value_, or elements with an _attr_ attribute containing one or more values, at least one of which matches _value_.

In a list of multiple values the separate values are whitespace-separated. For example, `img[alt~="dough"]`will select images with the alt text “making _dough_” and “_dough_ types”, but not "doughnuts".

`[attr|=”value”]` _The first attribute value in a dash-separated list_.

Matches all elements with an attribute name of _attr_ whose value can be exactly _value_ or can begin with _value_ immediately followed by a hyphen. For example, `li[attr-years|="1990"]` will select list items with a `attr-years` value of "1990-2000", but not the list item with a `attr-years` value of "1900-1990".

## Substring matching selectors
Substring selectors allow for more advanced matching inside the value of your attribute. For example, if you had classes of `message-warning` and `message-error` and wanted to match everything that started with the string "message-", you could use `[class^="message-"]` to select them both!

`[attr*=”value”]` _The attribute value contains this value_.

Matches all elements with an attribute name of _attr_ whose value contains at least one occurrence of the substring _value_ anywhere within the string. For example, `img[alt*="dough"]`will select images containing the alt text “dough”. So “making _dough_”, “_dough_ types” and “doughnuts” would all be selected.

`[attr^=”value”]` _The attribute starts with this value_.

Matches any elements with an attribute name of _attr_ whose value has the substring _value_ at the start of it. eg `li[class^=”message-”]`.

`[attr$=”value”]` _The attribute ends with this value_.

Matches any elements with an attribute name of _attr_ whose value has the substring _value_ at the end of it. For example, `a[href$="pdf"]` selects every link that ends with .pdf.

## Case sensitivity
All the checks so far have been **case sensitive**.

If you add an `i` just before the closing bracket, the check will be case insensitive. It’s supported by most browsers but not all, check [https://caniuse.com/css-case-insensitive](https://caniuse.com/#feat=css-case-insensitive).

## Combining attribute selectors
Attribute selectors can also be combined with other selectors, such as tag, class, or ID.
![Attribute Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql8kclw713txu7cizods.png)
And multiple attribute selectors can be combined:
![Multiple Attribute Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej0fzqljfqdo034pijc8.png)
Here we select all images with alt text including the word “city” as the only value or a value in a space separated list, **and** a `src` value that includes the value "europe".

And that’s it for today! We’ve covered the fundamentals of attribute selectors. Including presence and value selectors, substring matching selectors, adding case-sensitivity and combining selectors.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)