Using CSS Attributes Selectors

A CSS Attribute Selector, in its most simple format looks like this: selector[attribute]

Its purpose is exactly as it sounds, it allows you to select an element based upon its attribute and using css attributes selectors is exactly what we’re talking about today. While you might be wondering how or why that’s useful, given that most attributes within HTML can already be selected by just declaring that attribute, the CSS Attribute Selector can extend your selection abilities as well as allow you to specify precise values and custom attributes. That, and the most basic Attribute Selector indicated above is far from the only one that exists out there. In this tutorial, we’re going to explore the different types of attribute selectors and the interesting and useful implementations for each.

Selector[Attribute]

This attribute selector works with an element selector and is typically expressed inside of square brackets. Usually you use this to select the attribute of the element instead of the assigned value. An example:

HTML:

<p>Warm Kitty, Soft Kitty,</p>
 <p>little ball of fur.</p>
 <p title="kitty">Sleepy Kitty, Happy Kitty,</p>
 <p>purr, purr, purr.</p>

CSS:

p[title] {
 color: #de858a;
 font-style: italic;
 font-weight: 700;
 }

In the above code, we declare a <p> with a title attribute (you can check out other types of attributes available in HTML here: MDN, HTML Attribute Reference). Our title attribute takes “kitty” as its value, but that isn’t relevant yet here. Within our CSS, we target the span attribute using p as our general selector and declare [title] immediately after it. We style, therefore, only the line of text containing <p> with an attribute of title. It should look like this:

See the Pen General Attributes Selector by Khanh (@ironion) on CodePen.

Selector[Attribute=”Value”]

This more specialized attribute selector targets a specific attribute assigned to an element with an equally specific value assigned to the attribute. For example: HTML:

<p>Warm Kitty, Soft Kitty,</p>
    <p>little <a href="#ball">ball of fur</a>.</p>
    <p>Sleepy Kitty, <a href="#happy">Happy Kitty</a>,</p>
    <p>purr, purr, purr.</p>

CSS:

a[href="#ball"] {
  color: #de858a;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

In the code above, we declared an href attribute with a value of #ball (which, in our example, won’t seem to do anything when clicked). In our CSS, we declared a as the element selector and specified [href] as the attribute and go on to further specify that href should have a value of #ball before assigning the styling. Note that there is another <a> with an href attribute in our HTML, but it is unaffected. Check out the attribute selector with value example:

See the Pen Attribute With Value Selector by Khanh (@ironion) on CodePen.

Selector[Attribute^=”Value”]

This attribute selector will locate any attribute beginning with whatever the value is specified as. This is useful for detecting things such as keywords within your copy, links, images, downloads, etc. because it looks for whatever the value is at the send of a string. A string is a statement, sentence, a URL, a series of characters like “Hello, how are you?”, or “http://www.google.com” or “3479 Winding Hollow Way”. Here’s an example of usage:

HTML:

<p>Warm Kitty, Soft Kitty,</p>
<p>little <a href="https://en.wikipedia.org/wiki/Warm_Kitty">ball of fur</a>.</p>
<p>Sleepy Kitty, Happy Kitty,</p>
<p>purr, purr, purr.</p>

CSS:

a[href^="https"]:after {
  font-family: FontAwesome;
  top: 0;
  left: -5px;
  content: " \f0a9";
}

The above code declares an <a> with a link directed to the Warm Kitty Poem Wikipedia page. In the CSS, we are using the caret character to indicate that we want CSS to look for anything with a value of “https” if it appears first in a string of an href attribute. Some of you may recognize caret by its other name, the circumflex. Here’s what this one looks like:

See the Pen Attribute Selector Beginning of String by Khanh (@ironion) on CodePen.

Selector[Attribute$=”Value”]

Here’s a good one that’s very useful for targeting specific file types that happen to be linked or loaded through HTML. I’ve seen this one used a lot to indicate different download types (something I really should write into my own site). The $ tells CSS to look for the value at the end of a string. Here’s its implementation:

HTML:

<p>Warm Kitty, Soft Kitty,</p>
    <p>little <a href="http://www.google.com">ball of fur</a>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><a href="#.pdf">purr, purr, purr.</a></p>

CSS:

a[href$=".pdf"]:after {
  font-family: FontAwesome;
  top: 0;
  left: -5px;
  content: " \f019";
}

Up there, we declared a PDF to be downloaded when someone clicks on the purr, purr, purr portion in HTML. Within our CSS, we target specifically the links that end with .pdf. Notice, when you run it, that it doesn’t detect the link that ends with .jpg. Here it is in action:

See the Pen Attribute Selector End of String by Khanh (@ironion) on CodePen.

 Selector[Attribute*=”Value”]

The use of the asterisk here detects if the value appears anywhere within the attribute. You can use this one whenever you might want to highlight a specific word, link or other element. Like this: HTML:

 <p>Warm Kitty, <span title="great to snuggle">Soft Kitty</span>,</p>
    <p>little <span title="cats are like this">ball of fur</span>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><span title="cats always do this">purr, purr, purr.</span></p>

CSS:

span[title*="cat"] {
  color: #663750;
  font-weight: 700;
  border-bottom: 2px solid #663750;
}

See how only the span titles with an instance of the word “cat” are selected and subsequently affected? Here’s the visual:

See the Pen Attribute Selector Contains A Value by Khanh (@ironion) on CodePen.

There are a couple more attribute selectors that I rarely ever use, but exist within CSS. I’ll go over these now.

Selector[Attribute|=”Value”]

The bar targets attributes that contain the value immediately followed by a dash. For example: cart-port, red-wine, salad-dressing. This might be useful if you have attributes that are required to have dashes in them, such as file names and certain Classes and Methods in some frameworks. Here’s an example of this one: HTML:

<p>Warm Kitty, <span title="great to snuggle">Soft Kitty</span>,</p>
    <p>little <span title="cats are like this">ball of fur</span>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><span title="cats-always do this">purr, purr, purr.</span></p>

CSS:

span[title|="cats"] {
  color: #663750;
  font-weight: 700;
  border-bottom: 2px solid #663750;
}

And here it is in action:

See the Pen Attribute Selector Contains A Value by Khanh (@ironion) on CodePen.

Selector[Attribute~=”Value”]

The tilde will target attributes that contain the value in a list, even if that value appears in a space separated list. Like this:

HTML:

<p>Warm Kitty, <span title="great to always snuggle">Soft Kitty</span>,</p>
    <p>little <span title="cats enjoy this">ball of fur</span>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><span title="cats always do this">purr, purr, purr.</span></p>

CSS:

span[title~="always"] {
  color: #663750;
  font-weight: 700;
  border-bottom: 2px solid #663750;
}

Up there, we have the word ‘always’ appearing in the title attribute in two spans. When we run the code, we see that it searches, locates and highlights those spans with always, regardless of where always is on a list. I have a hard time coming up with a reasonable situation to use this one, but if you have any ideas, feel free to let me know! Here it is in an example:

See the Pen Attribute Selector Contains A Value by Khanh (@ironion) on CodePen.

And there you have it, Attribute Selectors in a nutshell. A lot of the time, many of these selections can be done in Javascript. I’m sure the debate is still out there, but I’m of the opinion that CSS is faster and puts less load on the CPU. So any time I can use CSS to accomplish something of equivalent function instead of JS, I tend to take that route.

Resources

30 CSS Selectors You Must Memorize, TutsPlus
MDN, Attribute Selectors
CSS Tricks, [Attribute]


Leave a Reply

Your email address will not be published. Required fields are marked *