CSS3 Attribute Selector: Targeting the File Type

Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you’re targeting has attributes like href, src, or type, there’s no need to add anything else.

These attribute selectors have been a part of CSS since version 2.1. With the introduction of CSS3, more types of attribute selectors have been added, allowing us to specify targets based on the element’s attributes even more accurately.

In this article, we’ll explore how to use a particular syntax to select elements based on the file type specified in an attribute’s value.

Syntax and Browser Compatibility

To target a specific file type, which is usually found at the end of a file name, we use the syntax [attr$="value"]. This employs the $= operator to focus on the end of the attribute’s value. For instance:

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

This code snippet targets links ending in .pdf and adds a PDF icon in the :before pseudo-element.

While this approach is a widely used application of the selector, the possibilities extend far beyond this example.

As for browser support, though this syntax was formally introduced with CSS3, it’s been compatible with browsers as early as Internet Explorer 7, allowing its use across all modern web designs.

An Example:

You’ll never know unless you try. Experimenting with new techniques is key to understanding concepts that might seem complex at first glance. Here, we’ll show how this specific syntax can simplify targeting elements within HTML structures, which might have been challenging to achieve with plain CSS alone.

We will use an HTML5 structure as an example, featuring a list of three images along with their captions. This example is meant to demonstrate the syntax’s application and doesn’t imply that your HTML should match exactly; whether you have fewer or more images, the essence is to grasp how to utilize this syntax effectively within any HTML structure.

<ul>
<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 image listed comes in one of three formats or extensions: jpg, png, and gif. Additionally, each image has a caption reflecting its extension, which serves as the image’s label.

Our goal is to assign different background colors to the captions based on the image extension: green for jpg, blue for png, and purple for gif.

Let’s begin by setting the figure tag’s position to relative, as we’ll be using absolute positioning for the captions.

figure {
  position: relative;
}

Next, we’ll add some styling to the images, including borders and shadows, for a bit of visual flair.

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); 
}

Finally, we’ll define the default style and positioning for the captions. Each caption or label will be a 50px square, positioned at the top right of the image.

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

Now, let’s introduce the background color. We achieve this by combining the attribute selector with the adjacent sibling selector, +.

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

This code targets every image whose source attribute ends with .jpg. The adjacent sibling selector then identifies the next element, in this case, applying a background color of #a8b700 to the figcaption.

Below are the codes to apply background colors to captions based on the remaining image formats, .png and .gif.

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

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

Wrapping Up

We hope this demonstration has shown you the possibilities when styling with specialized selectors, like the attribute selector we’ve explored. Next time you’re crafting your HTML, consider investigating if your design goals can be met with such selectors before resorting to adding unnecessary classes or ids to your well-structured markup.

Interestingly, there are two additional selectors of this nature that we plan to discuss in future posts. So, keep an eye out for those!