CSS3 Attribute Selector: Targeting the File Type

The attribute selectors is a really useful feature to select an element without adding superfluous id or classes. As long as the targeted element has an attribute like href, src and type we don’t have to do so.

The attribute selectors actually have been around since CSS 2.1, and now with a few more types of attribute selectors added in the CSS3 specifications, we are able to target the element’s attribute even more specifically.

And, in this post, we are going to use one of the syntax to select the file type that is inserted as part of the attribute’s value.

The Syntax and Browser Support

The file type is always at the end of the file name. So, to select that file type we can use the following syntax [attr$="value"]. This syntax uses the $= operator that will target the end of the attribute value, for example:

a[href$=".pdf"]:before {
	background: url('../images/document-pdf-text.png') no-repeat;
}

The snippet above will select every link that the attribute value ends with .pdf and insert a word-document-icon in the :before pseudo-element.

PDF Icon Source: Fugue Icons

While this is a common utilization of this selector, we surely can go beyond that.

Regarding browser compatibility; although this syntax is officially introduced as the CSS3 specification, it actually has been supported since Internet Explorer 7, so you can safely apply it through all your designs.

The Example

You’ll never know, if you never try. We just need to try something new to get a better understanding of something we don’t understand yet. So here, we are going to demonstrate how this syntax can be very helpful and handy to target an element in a particular HTML structure that used to be a bit difficult to apply using only plain CSS.

Below, we have an HTML5 structure to list three images with its caption. It is only for demonstration purpose, your markup doesn’t have to be exactly like the following snippet (e.g. you may have only one image or even three more images), but the point is you get to know how this syntax can be applied in a particular HTML structure.

<ul>
<li>
	<figure>
		<img src="images/macpro.jpg">
		<figcaption>jpg</figcaption>
	</figure>
</li>
<li>
	<figure>
		<img src="images/macpro.png">
		<figcaption>png</figcaption>
	</figure>
</li>
<li>
	<figure>
		<img src="images/macpro.gif">
		<figcaption>gif</figcaption>
	</figure>
</li> 
</ul>

Each of the images listed above has the following formats or extensions, jpg, png, and gif. They also have a caption that represents its image extension; this caption will then act as the image label.

So, here is the plan, we are going to give different background colors for the caption for each different image extension. The JPG image will get a green caption color, the PNG will get blue, and lastly the gif will get purple.

First, let’s set the figure tag’s position relatively, because we are going apply absolute position for the caption.

figure {
	position: relative;
}

Add a little decoration for the images with borders and shadows.

img {
	border: 5px solid #ccc;
    -webkit-box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .5);
    box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .5);  
}

And then, we set the default style and positioning for the caption. The image caption or label will have 50px square.

img + figcaption {
	color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

Now it is time to add the background color. To do so, we can combine the attribute selector with the adjacent sibling selector, +.

img[src$=".jpg"] + figcaption {
	background-color: #a8b700;
}

The snippet above will target every image with the source attribute ending with .jpg, then the adjacent selector will find the element next to it. In this case the figcaption will be added with the #a8b700 background color.

And here are all the codes for the rest of the image formats, .png and .gif.

img[src$=".png"] + figcaption {
	background-color: #389abe;
}
img[src$=".gif"] + figcaption {
	background-color: #8960a7;
}

Image sources are as follows: MacPro 1, MacPro 2 and MacPro 3

Conclusion

We hope that you can see the elegant side of styling using a special selector, like what we have tried to demonstrate above using the attribute selector. So, the next time you are styling your HTML, we highly reccommend you do some research on whether your styling can be applied using some special selector, rather than ruining your properly structured markup with extra classes or id.

There are actually two more new selectors of this type which we will cover in the next posts, so stay tuned.