Up next in 10
CSS Tutorial For Beginners 18 - Attribute Selectors
206 views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers explore attribute selectors, a powerful feature allowing the targeting of HTML elements based on their attributes. The video likely covers the syntax and usage of attribute selectors, which enable users to style elements that possess specific attributes or attribute values. Viewers can expect to learn various types of attribute selectors, including exact match, substring match, and value presence selectors, along with practical examples demonstrating their application in CSS styling. This tutorial serves as a valuable resource for beginners seeking to enhance their CSS skills and gain more control over styling elements based on their attributes.
View Video Transcript
0:00
Yo guys what the hell is going on this is CSS for beginners lesson 18
0:10
and in this video we're going to talk all about attribute selectors that's coming up
0:15
all right so here I am back in the HTML file I've totally stripped out the syntax.ciss
0:20
but before we get started with the CSS I quickly want to have a quick recap over
0:24
what attributes are in HTML so essentially attributes are a way of giving HTML
0:29
additional information about that tag so this here would be an attribute of ID this
0:35
here would be a class attribute this here will be a rel attribute this a type
0:39
attribute etc anything you see in green text here is an attribute now if you want to
0:44
learn more about attributes in HTML I have done a video on that in my HTML for beginners course so I'll leave a link to that in the description down below
0:51
but for the rest of us we're gonna get cracking and we're gonna see how awesome these
0:55
attribute selectors are now they are really really awesome because they can target pretty much any tag on your page that has an attribute associated with it
1:04
and you can get really specific with these like I'll show you in this video
1:09
But we'll start with a basic example and what we're going to say is we're going to go after
1:14
any span here which has a class associated with it, this class attribute
1:19
Now it doesn't matter what that class attribute is. It could be deck, it could be haws, it could be anything you want the class to be
1:25
Always saying is that the span must have a class attribute associated with it
1:29
So how would we do this? Well, the first thing we do is we write our span element here in the selector
1:33
And then the attribute portion of the selector is always contained within these square brackets
1:37
So that's the next thing we do. And then the next step is to write the attribute name
1:43
In this case, it's class. So we just write class. And that's it. That right there, my friends, is an attribute selector
1:49
And what we're saying is we want all the span elements that have a class attribute associated with it
1:54
So that's these three here. Not this one, because there's no class. and we're going to colour these purple so oops I spell that wrong purple so we'll save
2:06
this and view this in a browser now open with Chrome and there we go guys everything is
2:15
purple here these three spans and this one is still black so what else can we do well
2:21
we can do with any attribute whatsoever say we want to target these divs here and in fact just for a
2:27
just for demonstration purpose I'm gonna do another div but I'm not gonna give it an ID
2:32
and then within that I do p tag this is the third div and I gonna say that what we going to do is just go after div tags with an ID attribute associated with it so just these two here this one
2:47
and this one not this so how would we do that well again we write our element name which is
2:52
div and then the square brackets and then we write the attribute name which is ID and we're saying
2:57
there oops sorry I've got this one that should be div the element name that ID and then we're
3:02
saying there we want every div element which has an ID attribute associated with it and we're going to give these a
3:08
background of grey yeah and we'll save that and we'll view this in a browser and there
3:21
we go so these two here these divs have a background of grey because they have an ID
3:25
associated with it and this third one here this div doesn't have a background of grey so
3:30
again doesn't matter what the ID is or what the class is just that the they have those attributes associated with them
3:36
Cool. Now, what if we want to be more specific? What if we want to say the class should be something specific like deck
3:45
or the ID should be main content, or the title should be Google
3:50
Well, let's give that a whirl, eh? Let's first of all target all A's with a, oops
3:56
a title attribute associated with it. And it doesn't matter what that title is
4:00
We're going to give these a colour of red. So hopefully that should be these two links here because they both have this title attribute
4:09
So we'll save that and we'll view this in a browser again
4:15
And there we go, these two are red because they have a title attribute
4:21
This one here remains blue. Now what if we want to get more specific
4:25
We want the title to be equals search engine, which is this title here
4:32
This A link has a title attribute of search engine and notice this guys, this here is identical
4:39
to this, both in terms of case sensitive, I've got the capital there and the white space here
4:45
Has to be identical. Essentially a good way of doing this is to copy all of this and paste it in between there
4:51
Okay, so let's save that and hopefully it will just go after this tag here now
4:56
So we'll view this in a browser. and there we go just this one with a title of search engine that's really quite
5:07
amazing you can see from this you can get really specific when a class won't work
5:12
an ID won work or anything else you know an element or a child selector you can rely on this attribute selector to really hone down and get the element that you want
5:24
But hold on, there's more. We can do more. We can do something called pattern matching
5:31
Okay? And to demonstrate this, I'm going to give you this example
5:35
Now, to give an element multiple classes, we just put a white space or a space bar in between
5:41
the classes and separate them that way. So we'll give this a class of halls as well
5:46
Okay? And say we want every span which has a class of deck
5:52
Now you would think we'd do this, yeah? Class equals deck. And that should work
5:59
That should colour these three here purple. However, this one here has multiple classes associated with it
6:06
And the value of this class is deck, white space, halls, which is not this
6:12
So this one will not be picked up. These two will, but not this one
6:16
So how do we get around this? Well, we use what's called the tilde, and that's this thing here, this little squiggly line
6:23
And we put it before the equal sign. And this pattern match is saying that we want the value of deck to appear anywhere in a space-deliminated list
6:36
Okay? So that's saying if it has the class of deck, even if it has multiple other classes associated with it as well, that doesn't matter, we'll still pick it up
6:46
So let's view this in a browser just to make sure. Oops
6:53
Open with Chrome. And yeah, there we go, guys. All these three spans here, they're all purple
7:01
Okay? So that's how we attribute match. Sorry, that's how we pattern match to multiple classes
7:07
now we can do other things we could target specific sections of the
7:13
attributes so say for example we have I don't know a few links here that are
7:19
downloads a herrf equals I don't know something dot PDF all right and PDF file
7:32
and what we'll do is we'll just copy this so we've got a couple of them
7:37
So imagine that you want to style your PDF links, your download links, a bit differently
7:44
than any other link. Well we can do this. We can, and we can change this so they're not identical, something 2.pdf
7:52
And what we do is we say we want all our A yeah and then we opening our attribute part of the selector and then the H is going to be the attribute we looking at
8:04
And what we want is that we want to style the PDF downloads differently
8:10
So the ending of these H-Refs has to be PDF, because they're .pdf
8:17
So the way we do this is by putting it a dollar sign here, and then it is that it's a dot-pdephs
8:23
we put PDF what we're saying here guys is that grab all the A links that have an
8:29
H-ref attribute associated with it that ends in PDF that's what this dollar sign
8:36
means end in PDF so it's dollar sign equals PDF okay so we're gonna color those
8:42
what if we're not used green okay so that should just be these two here so let's
8:48
view this in a browser again open this up show an Explorer
8:53
open with Chrome brilliant there it is guys we've got the PDF file start
9:00
differently so this is really really flexible stuff and there is more we can have
9:06
an attribute starting with something the way we do that is with a carrot now
9:10
it's not going to be a PDF it's going to be HTTP and that would kind of
9:15
signify that this is going to be an external link okay so then we'll call out our
9:19
external links pink why not So we're saying here grab all the A's which have a H-RF attribute associated with it and they start
9:29
That's what the carrot symbol here signifies is H-TTP. So that should be this and this
9:35
They're the two external links. So let's see if that works. We'll view this in a browser one last time
9:44
And there we go guys. How awesome is that really? They're coloured pink
9:49
And you can see hopefully now that this attribute selector, business is amazing. We can hone in right down to individual elements with specific links or
10:00
specific titles, anything that you want. Okay, so really great selectors. So if you have any
10:06
questions about this whatsoever, feel free to comment below and I'll try my best to answer all
10:11
of those. If you enjoy these videos, please like them, please share them or subscribe. I'm going to
10:17
see you guys in the next one coming very soon where we're going to cover pseudo selectors
10:23
I'm