Check out a free preview of the full CSS In-Depth, v2 course:
The "Attribute Selectors" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Select elements using the attributes from your HTML markup, including partial value matches, similar to regular expressions

Get Unlimited Access Now

Transcript from the "Attribute Selectors" Lesson

[00:00:03]
>> Estelle Weyl: So let's go onto the attribute selectors.
>> Estelle Weyl: Originally we had just the attribute selector, which is does this attribute exist? So every HTML element can have a series of attributes. Some of them are valid, some of them are invalid. Doesn't matter if they're valid or invalid, CSS will still match them.

[00:00:26] But it's better to use valid attributes. Like you really don't need a type attribute on a paragraph, cuz it doesn't make any sense. But you could put a type attribute on a paragraph and target it. So you can use these. Here I have [alt]. Which says, does the alt attribute exist?

[00:00:45] The alt attribute is basically an attribute of the image element, and I think of the area for, anyone remember image maps? Anyone used an image map in the last ten years? In the last ten years?
>> Speaker 2: The last ten years?
>> Estelle Weyl: Yeah. Yeah, okay, we have one person-

[00:01:08]
>> Speaker 2: And it's probably been nine years ago.
>> Estelle Weyl: Okay. [LAUGH] So the alt attribute, this would be a good way of actually doing testing. Which element do you have, which element has an alt attribute? Because you always want to include and alt attribute with all of your images.

[00:01:29] No matter what your image has, if you have the image element, put an alt attribute in it. It is not accessible if you don't. And that means if it's just pretty and doesn't have any content put an empty element. It doesn't matter but always include the alt attribute.

[00:01:45] So you could say,
>> Estelle Weyl: Image alt display none, and then all the images that you have that don't have the attributes would still show and then you would know which ones are inaccessible and you could update them, or you could do something like img:not:([alt]). And say which images don't have alt attributes and target that way, we'll cover not in a bit.

[00:02:08] And then you could say which elements that are descended with a form, have a type attribute and target it that way. So, it would match input type date but it would not match a select because even though select is a descendant of a form, the type attribute makes no sense on the select.

[00:02:28] So CSS 2 gave us a few attribute selectors. This came on the one we just saw on the first page, came in CSS 2. And it gave us a few others. Not only could we use attribute to say is the attribute present, it doesn't matter what the value is, but we could also target if it's the exact value.

[00:02:46] Case-sensitive, if the value itself is case-sensitive. So type equals date. That's HTML, that is not case-sensitive. But, if you put class. Like a string that you would generate anytime you generate a string and you created it yourself, it is case sensitive. So it would be a case sensitive string that is an exact match.

[00:03:13] And then we've got also the | =, which matches anything that starts with whatever that value is, with or without a dash that comes after it. So why would you need something like that? Languages, so EN-US or EN-UK, you could just say LANG pipe equals EN and then you would match any English no matter what country it was from.

[00:03:41] And here is the example right there.
>> Estelle Weyl: And then we have attribute selectors that we received in level 3. You can put the carat before the equals sign, right here, and say any attribute, right here, who's value starts with that value. So you could find an external link, which with http and that would match https and http://, or you could target, in this example I've done a mail two link.

[00:04:25] This isn't quite right, cuz you could actually have a folder called http. But, if you really wanted to do it exact, so, these two examples, I actually put here for a reason. These are two good examples to use. If you are printing a style sheet, like if you're in your print style sheet.

[00:04:44] If someone is printing your page, they can't see where the link goes, right? So if it's a mail-to link, you can actually, it says email me, like George@ or if it's an, H, like an external link. In this example it says after any link that starts with H ref, that's H ref rather starts with http, as the content, put an opening parenthesis, the attribute H ref and then closing parenthesis.

[00:05:20] And so when you printed a link, but it would print out, like if you printed a page and it had links in it, it would actually add the URL, but only for external links. Because internal links, do you really want to show your navigation? No, but if you're saying like, this is a really good restaurant, here is their URL and you just say a Chinese restaurant, and it's around Chinese restaurant.

[00:05:44] Well, I don't know what Chinese restaurant that is. When you print it, it doesn't help you, but here, that's one way to print that URL. The one above it is not actually for print, it's for providing progressive enhancement. So basically, you have a mail to link and if you have a wider screen you could put the full email address plus the icon, if you have a narrower screen you could just put the icon.

[00:06:13]
>> Estelle Weyl: You could add a background image and some padding to it, or whatever. Then there's the ending, so dollar sign says it's an attribute selector that says any element that has this attribute with a value that ends in whatever that value is. So in these examples, I use PDF.

[00:06:33] There is nothing I hate more than opening a link and not knowing that it is going to open an application or it's gonna download something. So this something that improves usability. When you say find every single link that ends with PDF, and either put an icon of the PDF icon on that link, or put the content parenthesis PDF afterwards.

[00:06:59] It improves usabilty and also if you're doing like a content management system and you have no control over who is putting content onto your website. You can just say whenever somebody puts a mail to link I'm gonna put a little email icon. Whenever someone puts a PDF, I don't even have to teach them that this is what they're supposed to do.

[00:07:15] That they're supposed to indicate and to use best usability, and progressively enhance stuff, I'm just gonna do it for them. And then we have E[attr*=val] and what that does is it's with, that string val is anywhere within the content.
>> Estelle Weyl: So earlier I was talking about case sensitivity.

[00:07:41] In HTML five, attribute values are not case sensitive and attributes themselves are not case sensitive. But there are some that are case sensitive. I did mention that whenever you have a string that you create it's case sensitive. In CSS Selector level 4, we actually get this little i that we can do a space i and it basically says, this value but case insensitive.

[00:08:16] So if you were using XML and you had check box that was lowercase that would be the correct way to do it. Because it's XML it's suppose to be all lowercase. So I did a CodePen Test. I think I did an interesting example here. Let's just see. This was to test for case insensitivity and if it still worked.

[00:08:42] So I have, if red it's not supported, if light's green, it's supported. So when I wrote this deck, when I started writing it, it wasn't supported in all browsers. And so what would be case sensitive versus not case sensitive. I have a div with an ID of foo, right, lowercase foo.

[00:09:05] I can say, match with id of FOO uppercase. Is this big enough? Let's make this bigger, right? And says background color blue. But it's not blue. If I add an I right there it turned blue. So that means it's supported in this browser. With type text, right is in, it's not case-sensitive, cuz it's an HTML attribute value, versus this, which is a string that I created.

[00:09:40] And so the <input type ="text"/>, which is the second thing here,
>> Estelle Weyl: It's blue, because it inherited from this, and overwrote that. Oops, it overwrote this. Because here, it says input[type="TEXT" i], case insensitive. And then with the exact same specificity, both of these have, this has a specificity,

[00:10:05]
>> Estelle Weyl: Of 1 for the element, and the attribute selector is considered to have the same specificity as a class. So it's zero, one, one. And this has zero, one, one as well. The i has no weight so even though this one is actually more specific than that one cuz that's case insensitive.

[00:10:28] So because this is not case sensitive, cuz it's an HTML attribute, then that's why this was blue. But this was case sensitive, so it's green.