Join James Williamson for an in-depth discussion in this video Targeting element attributes, part of CSS: Selectors.
- Attribute selectors allow you to match elements based on the presence or value of specific attributes. As you can imagine, this capability gives you very precise styling control. In this chapter, we'll explore the many variations of attribute selectors starting with basic attribute targeting. So I've opened up the file that we're gonna be working with in this exercise, attribute.htm found in the 02_01 directory and the first thing I want to do is talk a little bit about the syntax, because the syntax for attribute selectors is very different than other selector syntax.
Essentially we use left and right brackets to surround the attribute that we're targeting. If I scroll down a little bit in the basic syntax examples. The very first example here where it says class within the brackets. That would match any element that has a class attribute. Now it wouldn't matter what the value of that class attribute was, simply the presence of the class attribute is all that would be required to trigger matching for that selector. Now below that, we can get a little bit more element specific with it if we want to. And this is how most people use them.
You can see here we have a div with no space, and then in brackets the class attribute. So again, it's still targeting the class attribute but in this case only if the class attribute is found applied to a div element. Okay, I'm gonna scroll down to our example section down here. We've got a lot more going on here because we're basically gonna be using the same file throughout this chapter and so there's a lot happening here. I'm gonna switch over to the code and scroll down, and I want to go over sort of the structure of our exercise region so you'll kind of know exactly what it is that we're going to be targeting.
So at the very start of this section in line 55 here, it has an article with a class of example. Below that we have a heading three of example. And then we have a nested section. Inside that section we have a heading four, we have a paragraph with a class of syntax, we have another paragraph that follows that that has two classes applied to it one for links and one syntax. Inside that we have several links. Remember those links have their own attributes, the h ref attribute and that title attributes that have different strings inside of them.
Some of the strings have words that match some of them don't, and notice that we have several different types of links, some are external links linking to external websites others are internal links, others are fragment identifiers, and we have one that links to an external resource, a PDF file. Now below that we have a heading four that has a class of tip, followed by a bunch of tips. And each of those tips in the list have a class that indicates whether its an easy, a medium difficulty tip, or an advanced tip, using a class tip-easy, tip-medium, tip-advanced, but notice that all of those including the heading includes the word tip or the string values of tip.
Okay so that sort of sets up what we're gonna be doing for the entire chapter. But of course, in this exercise, we just want to write a basic attribute selector so we can sort of understand how they work. So I'm gonna scroll up to the very top of the code and I've got the section in the head over there where our styles are going to be going inside the style tag, and I'm just gonna write a very basic general attribute selector. In my brackets, I'm gonna type in class, so I have and opening left bracket, a closing right bracket, then I'm gonna open and close my curly braces, and inside of that, I'm just gonna give them a border, so let's just do a border of 1 pixel, solid and red, then we're gonna save this.
Now if I go back out to my browser, and refresh the page. Now all of the sudden I have all of these elements that have red outlines to it. Now this is actually kind of cool, because it shows you one of the things that you can do with attribute selectors. They allow you to very quickly, and easily, find all the elements on the page that have a specific attribute. Sometimes you're gonna want them all to share some styling, but in other cases if you're debugging a file for example this is a really quick way to sort of see visually on the page who has a class attribute applied to them.
Now, let's say I want to be a little bit more specific about this. Maybe I want to take a look and find every, say, paragraph that has a class attribute applied to it. Well that's really simple to do too. So if I go back into my styles. Place the cursor right before the opening left bracket, and I'm just gonna do a p. So again there's no white space there. it's p[class and then a right bracket to close it. Now if I save this, go back to my file and refresh, You can see a lot of the borders go away, but if I scroll down at the bottom, I can see those two paragraphs at the bottom that have the class attributes applied to it.
Now, you may have remembered, by looking at the code that those two have different class attributes applied to it. If I scroll down, you can see that the first paragraph has a class of syntax, the second one has a class that has two values, links and syntax. So the actual value of the attribute doesn't matter at all right now. It's just whether or not the class attribute is found. Okay, so now that we have an idea of how attribute selectors work, we're gonna take that a little bit further in the next exercise as we look at actually targeting specific attribute values.
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors