Attribute selectors select by individual HTML attributes, rather than by HTML tag. In this video, learn how CSS simple attribute selectors test for the presence or absence of an attribute.
- [Instructor] You're very aware, that you can create selections in your CSS with classes, IDs, and HTML elements. You can specify family relationships between these as well. All of that's terrific, but did you know you can also select anything with attributes. Think of HTML attributes as adjectives. They're designed to describe a given HTML element a little bit further. For example, consider this anchor tag here on line six. It does so much linking to other pages, or within a page, it can also serve as an anchor, but this 'a' tag all by itself here does absolutely nothing. The 'a' tag is nothing without its attributes. So to this, we can go ahead and add some attributes. One of those popular, href. So just putting that in will link us back to the top of the page, and then maybe we also want to add a title attribute here. Back to top. The title attribute will show up as a tool tip in many browsers. When you roll over the link, you'll wind up getting a little tool tip that comes up, depending on what browser you're working with. So what if I want to style just this to top link, but not the other link that's here in this document. How can I select just the to top link down there at the bottom? Well fortunately there is an attribute selector that will allow us to do this. Attribute selectors all start with square angle bracket, punctuation, and then inside of that, I'm simply going to put the world title. So this particular selector is simply going to test for the presence or the absence of this particular attribute. It doesn't matter what's inside the title tag, or how specific it gets. You can simply test to see if it's there or it's not. And if it is there, then let's have it do something. So we'll go ahead and make that red. Now, what if I added a title to a paragraph? So in this particular case, this attribute selector is making the color red, now applies to both the 'a' tag at the bottom, the back to top link that we had, and it's going to apply to this paragraph as well, because both of these have a title attribute, even though the values are very different. So what I would recommend a lot of the time, as you work with these attribute selectors, is to make them specific to a certain tag. So I'm simply going to put an 'a' in front of this, and so now this selector will apply to the 'a' tag specifically, and the 'a' tags that happen to have a title attribute of any value associated with it.
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Best practices for CSS
- The impact of CSS selectors on performance