Articles

Empowering Your Stylesheet Through CSS Attribute Selectors

By Paula Borowska

Before we go into the CSS attribute selectors let’s take a step back. I don’t know how familiar any of you are with all of this but I’m sure you’re at least familiar with basic HTML attributes.

The two most obvious ones are class and id. There is also alt, style and href among many others.

	.myClass {color: red;}
	#myId {color: yellow;}

What Is an Attribute?

In HTML, an attribute provides additional information about a given element. They are always specified within the starting tag and are represented through a name/value pair, i.e. class="myClass".

Attributes are crucial for distributing information within the HTML mark up. You wouldn’t be able to specify links without attributes; you wouldn’t be able to style elements without them either. They are important in helping structure web pages. 

	<h1 class="myClass">Hello</h1>
	<h2 id="myId">World!</h2>

CSS Attribute Selectors

Now that you know exactly what an attribute is, you can realize that if there were a way through CSS to target elements by their attributes, your life as a coder would be easier.

And that is exactly the case; you can target specific attributes through CSS. I’d hope that by now you realize how extremely powerful that could be; you were never limited to just using classes or ids to style your HTML.

Now that you know this let’s get into the details of how to use CSS attribute selectors.

Selecting an Attribute

If you want to target a specific link from the list below like the Web Design Views link you could do it a few different ways.

	<a href="https://webdesignviews.com/">Web Design Views</a>
	<a href="http://www.mobiledesignbook.com/">Mobile Design Book</a>
	<a href="https://photoshopstar.com/">Photoshop Star</a>
CSS Attribute Selectors 1

You could add a class to it or you could use a pseudo selector but that’s not the point of this post. Classes change and so could the location of the link in relation to it’s parent elements. So, to target the Web Design Views link you will have to use an attribute selector as you see below.

	a[href='https://webdesignviews.com/'] {color: red;}

The way you can target the specific link is through targeting the href attribute and specifying its value to be the specific link address you are looking for. And voila!

CSS Attribute Selectors 2

Repeating Attributes

If there is an instance where you’d like to select more than one element based on similarity, you could. Let’s keep going with the link example and say that you want to style some of them differently, you want to single out all the blog links.

	<a href='#' rel='blog'>Web Design Views</a>
	<a href='#' rel='book'>Mobile Design Book</a>
	<a href='#' rel='blog'>Photoshop Star</a>

You would go about this the same way you do about different classes; you are going to target the different rel attributes with the value ‘blog’ and style it accordingly. Easy, no?

	a[rel='blog'] {color: red;}
	a[rel='book'] {color: yellow;}
CSS Attribute Selectors 3

Non Specific Selection

In CSS, you can target an element like a or h1, you can also target an attribute without specifying a value like href or rel. Check out the quick snippet below to see what I’m talking about.

	<a href="#" rel="blog">Web Design Views</a>
	<a href="#" rel="book mobile">Mobile Design Book</a>
	<a href="#" rel="blog">Photoshop Star</a>

	a[href] {color: red;}
	a[rel] {background-color: yellow;}

Syntax Tricks

Now that you know how to select various attributes it’s time to go over some syntax tricks in order to help you further select specific items. Unfortunately, life is not so cut and dried in coding so I’m sure the below tricks will come in handy.

Multiple Values

If your attributes in the CSS have multiple values the above syntax won’t work. This is a funky thing about CSS selectors that you simply should be aware of.

	<a href="#" rel="blog">Web Design Views</a>
	<a href="#" rel="book mobile">Mobile Design Book</a>
	<a href="#" rel="blog">Photoshop Star</a>

The below syntax wouldn’t work:

	a[rel='book'] {color: yellow;}

But if you simply add a tilde or ~, to the attribute it does now.

	a[rel~='book'] {color: yellow;}

The tilde means that what you are looking for is 'book' as one of the attributes. That’s the slight difference in logic over here.

Similar Names

Take a look at the HTML snippet below and notice I tweaked the titles names a bit. They are all different but they share some similar words like blog or design. How do you target those? 
	<a href="#" title="design blog">Web Design Views</a>
	<a href="#" title="design book">Mobile Design Book</a>
	<a href="#" title="blog photoshop">Photoshop Star</a>

Here’s a clever trick to select specific attributes based on a shared value: you use an asterisk. It’s a new feature thanks to CSS3.

	a[title*='blog'] {color: red;}
	a[title*='design'] {background-color: yellow;}

With the above selection the first and last links should be red and the first two links should have a yellow background. Don’t forget, this works for ANY attribute so classes and ids are fair game for this too!

CSS Attribute Selectors 4

First or Last Values

Sometimes all you want is the first or last value of it’s kind if so the below syntax is for you. This concept may be a bit confusing but bear with me. Let’s reuse the previous example and say we want to target two links with the word blog in them but style them differently.

	<a href="#" title="design blog">Web Design Views</a>
	<a href="#" title="design book">Mobile Design Book</a>
	<a href="#" title="blog photoshop">Photoshop Star</a>

To select the first value you use a caret, or ^. To select the last value you use a dollar sign, or $. In this example the Web Design Views link will be red because it’s title had the blog last while Photoshop Star will be yellow because it’s title had the word blog first.

	a[title^='blog'] {color: yellow;} /* First */
	a[title$='blog'] {color: red;} /* Last */
CSS Attribute Selectors 5

Get Super Specific

The very last thing I would love to share with you is how you chain multiple attribute selectors to get extremely specific in your overall selection.

	<a href="#" title="design" rel="blog">Web Design Views</a>
	<a href="#" title="design" rel="book">Mobile Design Book</a>
	<a href="#" title="photoshop" rel="blog">Photoshop Star</a>

Take a look at the snippet above and note that for the purpose of this example I’ve divided up the title to also reflect a rel.

	a[title='design'][rel='book'] {color: red;}

In this example, I want to target the title of design and a rel of book. This will make the second link to Mobile Design Book red. You can get more complicated if you would like, add many more attributes to this chain and include the syntax tricks like adding in the ~, ^ or $. Get as specific as you need to be.

CSS Attribute Selectors 6

Conclusion

I hope that this brought some great light onto your styling style. Personally, when I first learned about this my mind was blown. It did open many more possibilities in having a more effective stylesheet.