Select HTML Elements in CSS using attributes

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

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"

[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

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. It can come in handy anytime.

This article is from one of my threads on Twitter. You can follow me 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.