Select HTML Elements in CSS using attributes
Tags: css, beginners, webdev, programming
Published: 2021-11-10 11:06:36

Hey friends. Let's take a look at an awesome feature in CSS.

In this article, we will select HTML elements in CSS using the element's attributes. For example

You can select and style all `<a>` tags with a secured URL (https), you can select and style all `<input>` tags that are passwords only, and so much more.

The syntax is simple to learn and easy to master. Follow along.

## Use Cases
Let's say I have a list of links, and in this list, I want to specify a different color for links that are not secured.

Traditionally assigning classes to each unsecured list will come to mind.

But this can be full of bugs especially if it's a long list. Worst case scenario it is a WordPress site and styling unsecured links will have to be done dynamically.

So instead of classes, this is what will help

```css
a[href^='http://'] {
  color: red;
}
```

In the example above, I have selected all `<a>` elements that have their URLs starting with http://. Now we can apply any style.

Cool right?

- The square brackets are the **syntax of selecting attributes in CSS**.

- The "href" represents the attribute you want to select.

- The caret (^) is the operator, there are others (I will list them below); the caret simply means "starts with"

- And of course the value ("http://")

Here is the syntax `element[attr operator="value"]`

### Some more examples

Selecting all elements with titles that begin with "sam"

```css
[title^="sam"] {
  color: blue;
}
```

This means
`<p title="samandsong">Hello sam</p>` and `<h2 title="samama">Hey Sam</h2>` will be blue.

The example above can be rewritten as 
```css
body[title^="sam"] {
  color: blue;
}
```

Now that you know the syntax let's see the most used of the operators

## Operators

### no operator
When no operator is specified it selects all elements with matching attributes and values. For example

`input[type="password"]` means select only input elements with a type (attribute) of password

### asterisk (*)

We use this operator to select all elements whose attributes contain at least one occurrence of the specified value. For example

`input[type*="e"]` will select **all** input elements with a value of "e" as its type.

This means email, text but not password will be selected.

### caret (^)

With this operator, we can select all elements whose attributes' values begin with the specified value. For example

`a[href^="http://"]` will select `<a>` elements that has its "href" attribute start with "http://"

### dollar ($)

We use this operator to select all elements whose attributes` values end with the specified value. For example

`a[href$=".org"]` will select `<a>` elements that has its "href" attribute end with ".org"

### tilde (~)

With this operator, we can select all elements whose white-space separated attributes' values contain the specified value. For example

`[title~="mark"]` will select all elements that have a "title" of "mark".

For this operator to work, the values of the attributes should be white-space separated.

If "mark" is joined with another value or word, it will not be selected for example

`<p title="mark-clean-sheet"></p>` will not be selected, rather `<p title="mark clean-sheet"></p>` will be selected.

### Case-insensitive

Sometimes attribute values casing can vary. And these selectors in CSS are case-sensitive.

To make it case-insensitive add an "i" before the closing bracket i.e `[title*="mark" i]`

## Conclusion

There is one more operator that is used for matching language subcode. It is rarely used, but you should check it out on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). It can come in handy anytime.

This article is from one of my threads on Twitter. You can [follow me](https://twitter.com/elijahtrillionz) there to get a daily digest on web development.

Hope you learned something, if you did, shoot me a comment to let me know. If you think I did something wrong, please also let me know in the comments.

Happy styling.