CSS Attribute Selector: CSS Styling Based on Image Extension
In the old days of the web when I was learning CSS at college, my teacher showed the class how to style a page by using either a HTML tag, an ID or a class as the selector. For example
/* By HTML element */
div{
display: block;
}
/* By ID */
#id{
display: block;
}
/* By class */
.class{
display: block
}
But times have changed, we regularly want to style content based on attributes other than ID's and classes. Some of these attributes are custom attributes that are put in place by the developer while other custom attributes are generated by our frameworks.
Element attribute clarification?
HTML tags commonly have standard attributes like the src attribute commonly found on image tags. There's also an infinite number of user-defined custom attributes that we use to assign meaning to an element. On a div tag, one of these custom attributes could assign a flavor or any other data that we will use later. An example might look like this:
<div data-flavor="apple">
....some content
</div>
Styling Based On Attribute - Otherwise known as CSS3 Selectors
Lets start off with the basic CSS [attribute] Selector. We might want to style an anchor tag where the target attribute has been added. You simply need to add the name of the attribute, in this case "target" in between two square brackets after the a tag in your CSS.
a[target] {
background-color: red;
}
CSS [attribute="value"] Selector
Here's where things get interesting. Use the [attribute="value"] selector to specify that your CSS rules should only be applied to elements on the page that have an attribute with the specified value.
a[target="_blank"] {
background-color: red;
}
CSS [attribute~="value"] Selector - Contains
You can select elements that contain a specified string with the below example. Right here I'm styling anchor tags with the color red if the url has the name red in it.
a[href~="red"] {
color: red;
}
CSS [attribute|="value"] Selector - Starting With
In this example we are selecting all elements that start with the specified string. I'm using the code to color the text in anchor elements red if the url begins with http. Remember that this would also trigger on HTTPS URL's because HTTPS starts with HTTP.
a[href|="http"] {
color: red;
}
CSS [attribute$="value"] Selector - Ends with
As i'll explain a little bit later, this is the solution to my problem where I needed to style all elements where the src attribute ended with ".jpg".
img[src$=".jpg"] {
box-shadow: 0 0 30px 0px #636363;
}
CSS [attribute*="value"] Selector - Contains
A potentially useful selector for many developers, this example shows how you can target elements where the attribute value contains our specified string.
a[class*="red"] {
background: red;
}
Styling Based On Image src Filetype
We can use the information displayed above to style an img tag based on the filename in the in the src attribute.
Looking at the code below, we target all img tags where there is a src attribute ending with .jpg.
img[src$=".jpg"] {
box-shadow: 0 0 30px 0px #636363;
}
You could quite easily adapt this example to only apply the styling to .png files or any other extension by switching ".jpg" with your desired extension.
This is just what I needed to style all .jpg images on my site with a box shadow.
Browser Support
There's a couple of different implementations of styling based on attributes. Old browsers might have supported the CSS 2.1 standard which didn't offer all of the features described in this article. Essentially, you'd be missing support for any of the systems where we placed a symbol before the equals symbol which means that [foo^="bar"] and [foo$="bar"] won't work in really old browsers.
The good news is that selecting elements by attribute in CSS3 is fully supported in all major web browsers shipped after around 2011. Meaning that you're totally safe on Chrome, Firefix, Edge, Safari and IE 9+.