Beyond classes and IDs CSS also provides selectors to target element based on their attributes.  In this lesson we'll look at selecting elements based on attributes and using CSS modifiers to identify variations of those values

https://app.egghead.io/api/v1/lessons/css-targeting-elements-with-css-attribute-selectors/subtitles

Targeting Elements with CSS Attribute Selectors

[00:00] Hey, guys, in this video we're going to talk about selecting elements in CSS using attribute values. An attribute would be something like target, rel, or href. You can see I've got a whole mess of links here and some un-ordered lists.

[00:14] On the right here, the inner text of each of those represents the pertinent attribute we're going to be looking at. The first one has a target of blank and we can see that reference right here.

[00:26] We're going to go ahead and jump over to our CSS and start with our first attribute selector. Now, the way we do this is in square brackets. I've got some square brackets here. I'm simply going to test for the existence of a target attribute right now.

[00:40] I'm not specifying a value. I'm checking for the existence of it regardless of the value. I'm going to say that that's going to have a font style of italic. I'm going to save that. On the right here, we can see these two links that had target attributes have become italicized.

[00:56] Let's go in and check for a specific value. I'm going to say target equals, and then, in this case, we've got some frame. That's going to be our value, some frame. I'm going to go ahead and give that a background color of CCC. Load that up and we can see that now this has the background color of CCC.

[01:17] That's our specific value. Let's go ahead and test for a value that begins with something. Here, we're going to say rel. We're going to be targeting these three guys right here, link blog, link products, and link about.

[01:30] You can see this one is hyphen-separated. There's no separation on this one. This one has a space separation. We're going to say rel equals and, right before the equals, we're going to have a caret. This is our "begins with" modifier.

[01:44] I'm going to go ahead and say link. We'll go ahead and give that a color, I don't know, purple. Save that. You can see a whole bunch of them have been updated. That's fine. All of these start with link.

[02:00] We can also combine these. I'm going to take this one, and say it begins with link and it also has a title of special. We can see these two right here would be what we're targeting, where we've got a rel value that begins with link and we've also got a title value that it is equal to special.

[02:22] Here, we're going to say the color is green. Save that. We can see that those two have, in fact, become green.

[02:30] We've got a bunch of links in here that contain the word "available." We're going to try to target those by using another modifier. We're going to say rel, and here, we're going to say asterisk equals. That means that it contains this string anywhere in its attribute values.

[02:47] We're going to say available. We're going to go ahead and set that one's color to black. Now, you can see that has affected all of the items that have available in that attribute of rel.

[03:02] We can also use another modifier to see if a value contains an entire string using this tilde equals. We're going to look for the word "product" and this needs to be there as a whole word. It can't be strung together. It can't be hyphenated. It needs to be its own word, either at the very beginning followed by a white space or somewhere in that value all by itself.

[03:28] Here, we're going to say color and we'll make that red. Save that. We can see that we have identified those two. These are the only two that have the word "product" as a whole.

[03:39] Now, we can also look for words at the beginning that may be followed by a hyphen. That would be something like this one right here, sale-product. If we're looking for sale, we're going to need to identify that it could be followed by a hyphen.

[03:53] We're going to say rel. We're going to use a pipe here, and then we're going to say sale. Again, that means it should start with sale, but it may be followed by a hyphen.

[04:03] On this one, let's do an after. Let's say we'll do an after, and we'll say content is exclamation points because it's on sale. You can see these two right here, sale-product and sale, both worked in that instance. They both got the after CSS.

[04:23] We could also do an ends with, which uses a dollar sign. Some of these are very similar to regex. Hopefully, that's helpful. But dollar sign equals means that it is going to end with this value.

[04:35] We're going to target these discontinued ones here. I'm going to say discontinued. Whoops. We'll set their color to CCC and un-highlight those. We've got these three right here.

[04:50] Now, this one, obviously, the last one here is simply the word "discontinued." It could have been identified in a bunch of different ways, but both of these clearly end with discontinued.

Targeting Elements with CSS Attribute Selectors

Share this video with your friends