CSS Attribute Selectors

Key Takeaways

Hello, my friend and friend, and welcome back to my channel. Or just in case you're new here, my name is Kevin. And here at my channel, I help people fall in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And today, we're going to be doing that by exploring advanced use cases of attribute selectors. And I've done a previous video where I looked at some of the simple use cases as well as a few other combinators. So, if you missed that one, it will be linked down in the description. And we're going to dive right in here. And we're really quick recap for those uh who maybe don't remember or if you missed the last video and you don't want to go there just yet. Uh if I select all my links, we can see they're all selected and they look not fantastic, but it will help us understand attribute selectors. Uh and I can come here with an open and close square brackets and that is our basic attribute selector. And I can look for any of them that have a class on it. And if I hit save, you can see that they're all getting selected except for this one. Because if I come over into my index, they all have classes on them except for this one right here. It doesn't have a class. That means this doesn't it's not true and it's not selected. Pretty straightforward. Uh right. Uh we can look for very specific things. I don't know why you'd want to do this, but we could say class is equal to and we could look for I think it's called another link is one of the ones I have. and then it would select my last one because it's an exact match of this attribute here. Or maybe for some reason you want to select everything that has a very specific href and style that one differently. And so we could come here and anything that has an href equal to that will get selected. So this would probably be more useful if you're doing things like data attributes and you're modifying things with JavaScript and you want to match the data attribute. That tends to be how I use uh this type of selector right there. Now, where things get more interesting though, let's go back to our class that we had before. And when we have the equal sign here, uh, let's just go down to class equals link. We have nothing. Oh, we have one that matches link. Look at that. I didn't think we did. The first one matches link. Fantastic. Uh, made my own demo. And I don't know what I'm doing with it apparently. But that's okay. It's still going [laughter] to work. Uh, so where things get more interesting is where this equal sign is. And this is where we get into these more advanced ones is before the equal sign, we can put a whole bunch of special characters here. And the first one we're going to do is the tildy. And let's hit save. And in doing that, it looks exactly the same, but there is a difference in that this is a class of link, but any of the attributes of the class could be link. And what I mean by that is let's come over here and let's add a link to this one. I'm going to say link here. And now you can see both of these are actually being selected. The if I if I go back to class is equal to link, this is an exact match of what we have here. So now only the first one is being selected because that one only has the class of link. There's not anything else showing up on here. When we come in with the tildy at the beginning here, as long as any of the words in the the spaceepparated list of that attribute match, then it's going to select it. So in certain situations, uh this could come in handy. Again, probably not with classes cuz then you're just doing your class selector anyway. But I think it highlights nicely how it differentiates the ways that we can use it and what this tildy is actually doing right there. Now, next up and save the ty uh is an interesting one which is the pipe character which is the straight up and down line. And if we take a look at that one once again, it's looking like it's doing the same thing that we just had. The difference now is this is looking for if the class name starts with that. So we can see link and we have link three here. So, if I take this part off where we had that link three and I hit save, it's still selecting this one because it's being prefixed with the word link here. Uh, and this could definitely be really useful where you have say your button classes, right? So, you have instead of having to do like a button generic class and then you have your button accent and then you have your button secondary, etc. Go on and on. Maybe you're doing the double hyphen like a bem style or however you're you're choosing them. What you could do is look for anything that is a button. And in here we say class is pipe equal to and button. And we put like our generic button classes here. And that means when you're in your HTML you could just say you have a button class equals uh your button accent. And because this is prefixed with the button at the start, this general style would be there. So you wouldn't have to come in the, you know, a lot of the time you'll have something like this instead where you have your button button accent. Just makes it so you don't have to do that extra step uh necessarily of having the generic button here. And you could even still have a generic button, right? Even if you just came in with this button like this, that would still be equivalent to this. So it would still match. So this could still be a a generic button style. And then you could have your other button styles coming in on top of that. So that one I think is an interesting one uh that probably doesn't get used as much as we could use it, including by me. I should start uh playing with that I think on some personal projects and seeing how I like it. Now where things get a little bit more interesting is this is prefixed by. So it includes like as long as there's a hyphen followed by other things. Uh you can also come in here. I don't know what this character is called. I think I always call it the sheepo. Uh cuz I grew up in a French area and so it's like the chapo you put on your your it's an accent, right, that we have on some of our characters. So I don't know what that is in English. I should have looked it up before I made the video, but I'll let you comment down below to let me know. Uh and if I do it with the this guy here and I hit save, now this one is also getting selected. That's kind of weird because this one is my link to and so it's prefixed but it's not necessarily looking for a hyphen. when I used the uh the bar character uh that one it's looking for any characters that come before a hyphen. So it's really like prefixed values. Whereas with the link it's any of the characters that come at the beginning of the word. So it's going to go through all the beginning of the the match. And so it doesn't care if this is a space. It doesn't care if it's a link by itself. The only time that would break is if I put like a link to cuz now it's not at the beginning. It really starts at the first characters and goes all the way through. This one I'd probably use less. I don't tend to like camelc case things. But I'm sure there's potential for some interesting use cases of this one as well. And so we'll go back to to having that like this. So it's matching all three of them. But let's jump back here and instead of doing the chapo that we have right there, we can come in with a dollar sign. And the dollar sign is interesting cuz the dollar sign is instead of prefixed, it's suffixed. So what's at the end? So in this case, I have another hyphen link. So it's matching this cuz the link is at the end. If we take the hyphen off and now it's still working. So it's like the previous one we looked at where it was with with that guy. So instead of starting at the beginning like this one was, when we go to the dollar sign, now it's looking from the end of the class names. and going the other way. So, as long as it ends in link, that's fine. If I have another letter there, it's not ending in the word link. So, that one doesn't match anymore. And you'll notice that in all of these situations, if it's just the class of link, it is matching cuz it's both the first four characters and the last four characters. So, it matches in every single situation. Uh, and that one is coming in. And you might be wondering like, why would this ever be useful? Why would I want to get the end of something? Well, this could actually be quite cool because what we could say is a href is dollar sign equal to and I could look for something in this case that ends in a PDF. And you might have other file formats and other things as well, but in that case, we can go and grab the after of that. And we'd say the content of there is I have some your some some things ready. So, images and it's just my uh PDF.svg that I have in my images folder. So if I do that, I get a little PDF icon that shows up after the link's name. So it just highlights to the user that's actually going to be a PDF that they can get to. And we can take the same type of approach for the prefix things as well. So I could say here if I have a H or an A, not an H, an A link, my my anchor link with an href. And this time we could look at the beginning. So I could say if it's prefixed, we had a few different options there. Uh but we're going to go with the the hat character. uh which I guess you know shampoo in English is hat. Uh and I could say if it starts with an HTTPS or maybe just an HTTP like that that means it's an external link probably right that's why we're starting it with that. Uh I'm going to say the whole thing but you know however you're doing it would be fine. And then I could say here that the content of this one is my URL and I have an external SVG here that I could use. Uh I did that as a on the link. Whoops. Uh, we want that to be my after as well. And then you can see Google is getting the the little external icon. Could do more styling to make this look a little better, but the Google's getting an external icon. The PDF is getting a little PDF icon. And so I think for links, this actually offers a lot of possibility where you're not having to come in and add a class to each one of these. You just have it set up like this, and you know that it's going to work every single time without having to muck around or or do anything, which is pretty cool. Uh, we do have one more though before before you run off and go, "Oh, that's cool. I want to add that to my projects." There's one last one, which is a we'll use our class here. We're going to jump back up to this example and I'm going to replace this dollar sign with a star. And as you might guess, the star, it's like our star selector, universal selector. Select anything with the occurrence of the word link in it. So, they all get selected except the PDF because my PDF doesn't have a class, so obviously there's no link in there. On this last one, we take the word link off. Now, that one won't be selected either because there's no recurrence of the word link. And on this one, uh, or another, let's say first link somewhere. So, the word link is in here. If I hit save, it is still matching. Or another link here. Hit save. As long as that string of characters exists, it's going to match and it will be selected. Not sure on when I would use that one. Maybe you have a use case. Please let me know down below. But this for me are two very good use cases that I would definitely use. And I do also use uh the just straight up like data theme is equal to dark or something like that. I use things like this all the time as well. Last thing before I let you go is performance. People have often commented on videos where I talk about attribute selectors and say, "Oh, performance of those isn't as good." That's from a really long long time ago. You can use attribute selectors very safely these days. It's not going to have an negative impact on your performance. So, please don't worry about it. And with that, I would like to thank my supporter of awesome, Johnny, as well as all my other patrons and channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.