Attribute Selectors

[00:00:00]
>> What is an attribute?
>> Property on an HTML element
>> Property in the HTML element if the HTML element is a noun and then the attributes are adjectives, so it's helpful to have a link with an a but it doesn't tell us anything if we don't tell it where to go.

[00:00:18]
So, href winds up being an attribute, target is an attribute, title is an attribute. All of those things are attributes, and the amazing thing is that in CSS we can select by attribute, instead of selecting by element. Sometimes this is incredibly useful I have some cool tricks to show you with this So first of all, there are many kinds of attribute selectors.

[00:00:44]
Those of you who like regular expressions, you're gonna love attribute selectors because there's many different ways that you can write this to select different parts of these particular kinds of attributes. So let's go through what all of those are. Okay, so let's start with what's called the simple attribute value.

[00:01:02]
And basically, what the simple attribute value is going to do, is simply test if that particular attribute is present. So if I were to, for example, let's test for the title attribute, and you're gonna put these in square brackets like this. Okay, so square brackets, and here I've put in the title attribute.

[00:01:27]
So you just put in for the simple attribute value, just put in the name of the attribute that you're selecting. And then. You can style it however you want, so let's say background-color: green. So those three things on the page have a title attribute associated with them. Doesn't say anything about what the value of that title attribute is?

[00:01:54]
It just says that it has the title attribute. Make sense? So that's a super simple one. Where we just test for is something present or not. Now, what if you want to look for an attribute that has an exact value? This is where it starts to get a little bit weird.

[00:02:16]
So I'll go through a few of these here. So I want the one let's see, I have a title here in line five in this link I have a title of unguessable, okay? So let's say that I want to select that a title with a value of unguessable.

[00:02:42]
Shockingly, it looks just like that. Now you can read that link again. Okay, so those other two links that I have here that had title attributes did not match the string unguessable. Here's the thing for those of you who are concerned with the exact attribute value. It must match exactly letter for letter, if there's a space, and we have more blah, blah in this title, because of course you can put in long phrases in your title attribute.

[00:03:21]
All of those words in that order are spelled that way, with all those spaces and punctuation it must be an exact match. It can be partial match, it can be anything order than exactly that, okay? So that is what the exact attribute value is, they don't float around.

[00:03:41]
What did I have for my other titles? Okay, so here I have a line if Guess here on line 26. And that is, here's the thing and hiding in this one. Okay, so we have Guess, and we have Guess this, so guess is here on line 26. Guess this is on line 33.

[00:04:07]
And then we had unguessable. So the whole string unguessable does not match those particular things that come later, even though it has some of those letters in common. All right, so then we'll do my other favorite one, so these are the three that I use. This is the attribute present or not that's a useful one the exact match that's a useful one I use that a lot in my code.

[00:04:36]
And this last one I also use a lot of my code, and this is the partial match comes before comes after as long as it contains part of the string, it will be a match. So this is the technical name, is the arbitrary. Substring attribute value. And shockingly, title*= star for the wild card equals let's just say guess.

[00:05:16]
And let us, what we got going on here. Let us put in a. Border 5 pixels dashed red. Okay. So notice that it put a border around the one with the green background. Let me pick a different color black, I put a border around the very first link up there at the top of the page.

[00:05:46]
Guess was part of that string but notice that it did not match later in the document where I had the word guess, but it was a capital letter. Okay, so it has to match in capitalization as well. So if I change this to a capital G for Guess, then the last two are going to be selected instead.

[00:06:08]
Make sense? Okay, so that's what that is. Then we have the two that I think of is for nerds. So you can also select a beginning substring, or you can select an ending substring. So I'll just put that here in your notes as well. So beginning substring selector.

[00:06:40]
Would look like this. Title would be. Caret equals. In other words it's gonna start with this, background-color: orange. It will start with it.
>> One is Guess and one is Guess this.
>> All right, and the other one is Guess this yep, and then I have an ending substring selector.

[00:07:22]
Ending substring selector, which is gonna get title. Dollar sign equals this. Background-color: brown. Color yellow, okay, so that will select only the very last one at the bottom because it ends with this. So let me open up my CSS window here, so you can see all of these.

[00:08:06]
So just a quick review on that. So the first one simple attribute value just test for the presence or absence of a given attribute. It's not gonna test as to any of its value, just test if it's present. The exact attribute value is going to guess like that string with that capitalization it is an exact match.

[00:08:28]
So by the way, if I said, capital Guess on this one, it would still not necessarily select both of these. It's selects this one down here, which has just guesses the full value, but Guess this the title with Guess this, it doesn't match that because this is still part of the value of that attribute.

[00:08:55]
And so it won't match that. Okay, let me go back to what that was. All right, the arbitrary substring attribute value beginning ending, it doesn't care. It just looks for the string somewhere inside of the value of that particular attribute, which is really nice. And this tends to be the one that I use all the time.

[00:09:17]
But I know that we have a lot of hardcore nerds out there who want it like a beginning substring or an ending substring. So those exist as well and if you saw me here, I had to like really read my notes it's because I never used them, but they exist, so it may be useful to you.