In the previous lesson in this course, you learned about programmatic styling of elements. We talked about the inf family of selectors, inf child, inf of type, you learned about math formulas, advanced methods for selecting individual items or even groups of items that follow a pattern.
This is on top of the methods you learned early in the course, like simple methods for selecting and styling elements, you know, ID styling, pure HTML element styling, class-based styling. And after all of this you’re probably thinking, Kevin, there can’t be anything left. We have to have covered it all by now.
And the reality is that we have not. There is one more way to target and style elements in web design. And this is yet again a technique that is going to greatly elevate you above a beginner web designer above an intermediate level web designer and it’s a technique that you are going to run into well situations you are going to run into where this is the only technique that can bail you out where classes will not work where IDs will not work where programmatic styling with pseudo classes will not solve the problems or the tasks that you are faced with.
This my friends will come into play. You need to know what it is, you need to know how to do it. I’m gonna go ahead and share my screen.
We’re gonna be talking today about data attributes and attribute selectors. We’re gonna talk about superpowers involved with attribute selectors as well, which does go beyond data attributes. It actually is going to expand the power of a lot of stuff that you have learned thus far in this course.
But we’re going to start here. We’re going to start here with data attributes. What you’re looking at is a grid of profile cards and we have three specific things that we need to do with this grid of profile cards.
First of all, you see that everybody has a title, right? Here’s everybody’s title, executive, executive, designer, team lead. What we need to do, first task, task number one, we need to make sure the executives, which are right now in position six and seven, always, always appear first in the grid.
Why? They’re executives, they’re the leaders. They need to always show up first.
We also need to make sure that we style their cards differently so that they stand out. We want the executives to look different from everybody else. And task number three, we need to take Mr.
Jake here, who is the owner of this nice band of brothers, brethren, whatever they are, people, and we need to make sure he is always first in the grid and we need to do this with CSS. Okay so how are we going to do that? Can we use ID styling?
No. Can we use HTML styling? No.
This is not scalable, this is not maintainable. Can we use classes? No.
We are using classes for the cards. Every card has a class called profile card but the problem with classes as you see is that every card has that class. And it still doesn’t tell us which cards belong to executives, which cards belong to Jake.
We that that is data that would be nice to have if we could target that data somehow. We can’t do that with classes. Classes will not do that.
So what can we use? Well, oh, by the way, we can’t use inf selectors. You can’t say, well, Jake is in position seven and Jennifer is in position six.
Go ahead and use inf to target position seven and position six, because this grid of cards is actually dynamically generated from a query loop. And we cannot guarantee that those executive cards are always going to be in those exact positions. So programmatic styling using inf selectors is not going to work here either.
That leaves us with the need, the need to target elements based on their data. And we can do that with data attributes and we can do that with attribute selectors. And that’s what you are going to learn about in this training.
And it is immensely, immensely helpful. And you must, if you don’t want to be a beginner and you don’t want to be an intermediate, you want to be a professional, you’re going to need to know how this works. Okay, so we’re going to scroll up.
We’re going to talk about what is a data attribute. So think about classes, think about IDs. Those are like labels.
You can slap on an element, right? And you can target that element using its class or its ID, and you can style it, and you are good to go, right? Well, data attributes are also like labels.
So you could throw a data attribute label on something, but the difference is it gives you more context for what that thing actually is, right? Because it’s kind of like a class, but it’s also kind of like an ID, right? It has a unique value.
Now, maybe not unique, maybe a few different items have that same value, like executive, for instance. Multiple people can be executives, but it is unique in the sense that it’s not just generic labeling of something. It’s not like profile card.
Like the profile card class gives you no context for who’s an executive, who is Jake, we don’t know, right? So we’re combining this concept of like a class with unique, valuable data that identifies specific elements, okay? All right, and by the way, the functionality goes beyond just styling, which we’re gonna look at in just a minute.
Okay. All right, so I’m going to scroll down We’re just going to look at this right here this example little code block You can see that a class might be on a div and that class is called profile card So at least we know hey, we’re looking at a profile card in the code here But this right here is the data attribute. It’s HTML just like a class is okay it’s added to the HTML element and it always starts with the word data that is a best practice scenario I wish it wasn’t the case I wish we could just say profile name equals Kevin Geary or whatever we want to call it but the gods in CSS land and JavaScript land decided that it needs to have a data prefix so data dash and then the name that you want it to be it can be any name, but it’s got to have the data prefix.
So in this case, because these are profile cards, I said that this are going to, we’re going to, we’re going to basically tell the HTML, the profile name, the name of the individual, and thus we have to prefix it with data. It becomes data profile name equals Kevin Geary. Okay.
And then you can put all your content in the card, whatever. That’s the only thing about the HTML that that has changed, all right? So now we have to talk about targeting that element based on its data attribute.
In order to do that, we need to use an attribute selector and we need to select the attribute. Okay, so we have this right here where we take the data name, right? And the value, and we put it in square brackets.
The square brackets denote an attribute selector. And there’s many, many, many different examples of doing this that we’re going to look at later. But I want to just stick to this one example for right now.
So square brackets in your brain, when you see square brackets, Ooh, this is an attribute selector. We’re selecting an element based on an attribute of that element. Okay.
Um, and then we can just put CSS, you know, just like we normally would, just like this was a class that we referenced or an ID that we referenced or an element. We can use is, we can use where, we can use has, we can use not, we can use all of these other things that we’ve learned about in conjunction with data attributes, okay? So in the example above, in this example right here, we are targeting any element that has this attribute, data profile name, if the value of the data attribute is equal to this, is equal to Kevin Geary.
So let’s scroll down now and let’s talk about exactly how we’re going to accomplish, actually I’m going to go into the builder now, and we’re going to scroll down and talk about how we want to accomplish these three tasks. Remember what we have to do. We have to move the executive cards to the beginning.
We have to style them differently than everybody else. And then we have to make sure that Jake, our man Jake, always shows up first in the grid. Okay, so here’s how we are going to approach that.
Number one, I am going to select the first card. That by the way, is the only card. As I explained, only one card physically exists, right?
All the other cards are generated dynamically by the query loop. You’ve already learned how to do this in previous lessons, so don’t ask any questions right now. And don’t look confused.
Get that confused look off your face. We already covered this in a previous lesson. By the way, classes, putting classes on cards, like, oh, there’s Jake’s card, we’ll just assign another class to it called Profile Card Jake.
We can’t, because we can’t click on it. It’s not a physical card. It’s not actually there.
It’s being dynamically generated from a query loop. So you can’t select it and just throw another class on it. So what we have to do is we have to come over on this first card, we’re gonna go to style, attributes, add an attribute.
And we’re gonna add data profile name, right? The profile name, the person’s name with the data prefix. And we are going to dynamically insert his name, just like I did here in the card, okay?
So where did I get his name from? His name is actually the title of the post. So I’m gonna put the little lightning bolt, click the little lightning bolt, and just say post title.
And now if I save and we go to the front end and we refresh and we inspect this card right here, you are going to see that not only does this card have a new data profile name attribute attached to it, let me get, let me see, here we go. So data profile name equals Parker on this one. But look, if you just start looking at all of the cards in the list, look at this.
Parker, Jackson, Imani, Carson. We’re taking data that’s associated with each card and injecting it right into the HTML. And then we can target elements based on that data.
How fun is that? That’s really, really, really fun. Okay, now we’re not done yet.
We have to add another data attribute, right? What else do we need to know about these cards? We can add as many attributes as we want to based on how much data we need to know, how much data needs to exist in the HTML.
Well, we need a data profile position, right? That’s the position that they work at. Or you could say their title, whatever you want to call it, it’s completely up to you.
In fact, I’ll just change this to data profile title right now, because just to show you, you can do whatever you want to do as long as you’re using the data prefix. Okay. So I have data profile title.
And where am I going to get that information from? Well, it’s already stored in a custom field. That’s what we’re pulling from on the card itself, right?
So I can come down here and look, it’s the ACF team member position. Okay, so I’m gonna go ahead and hit save. Let’s go check this on the front end.
And now look, I have data profile name equals Parker, data profile title equals Coffee Guy. And I come down and let’s see, I’ll collapse that. What about the next card?
Look, developer, designer, team lead, director, hey, executive, executive. Suddenly now, our HTML has more contextually relevant data in it, right? Whereas a class profile card doesn’t give us any contextual data.
There aren’t even IDs on here. There’s randomly generated classes, but those don’t give us any context either. The only way we can accomplish our task is by knowing what data is associated with which element and data attributes allow us to do that.
So now what we have to do is come back into the builder now that we’ve got our data attributes added physically to every card we have to come in and talk about how to style that. How do we attack this situation now with CSS? Okay so I’m gonna activate profile card Delta and I am going to go to the custom CSS area and I am going to target that card But I don’t want to target Every card like like this because that would just be targeting the class.
I need to target that class and A data attribute. Okay, so I’m immediately gonna hit square brackets Okay, not space square brackets because the attribute is not a child of the card. The attribute is on the card itself.
It’s attached to the parent element. So we have to attach the attribute selector to the class. So now I’m looking for FR profile card deltas that have an attribute.
Which attribute, guys, I’m gonna zoom in, which attribute do we need to look for? Well, let’s start with their title, right? So we’re gonna say data profile title, okay?
Now I wanna show you something here. I don’t even have to put a value. Look at this, okay?
It’s going to target any class with this attribute. And I’m going to say border five pixel solid red. And look, it finds every instance of the cards.
Why? Why? Because they all have a data attribute.
I just want to show you that you can target, just show me the elements that have this particular data attribute. You can absolutely do that. Now what I’m going to do is I’m going to say, no, no, no, no, no.
Instead of showing me all of them, only show me the ones where the data profile title equals executive. Now it’s going to find only the executives. And now we can do something with that information.
We can say, ah, order, pop quiz, pop quiz, what’s the value gonna be? You wanna move those executives to the front of the line. What is the value gonna be?
This is a pop quiz, five, four, three, two, one. You should have already spit out the answer. It’s negative one, negative one, okay?
Order, minus one, and those executives go right to the front of the line. Why is it minus one? A quick recap for those of you who failed the pop quiz, terrible students, it’s okay.
I’m just kidding. I’m just kidding. Order minus one puts them in the front because the natural order of all elements is zero.
The value is zero by default. Minus one is less than zero. They’re going to show up first.
Okay. All right. So I don’t just want them to show up first, by the way, what else do I want them to do?
Well, I want to change their background color to black. I want to make them dark cards. Okay.
Now what we have to do is we have to target the title and the name. I believe that’s what they are. The classes, you know, name and title.
It’s the name of the card plus the name and then the title. Those are the names of the classes. I’m just guessing.
I’m just guessing. I’m trying to remember. Okay.
So what we want to do to target that is we’re going to use the same instruction, root data profile title equals executive. So find the executive cards, right? And then space, because now I want to target child elements inside of these cards.
Which child elements do I want? I want two of them. And whenever I want two or more child elements, I want to target them.
I can use something that we’ve already discussed, that we’ve already covered. Again, if you’re looking confused, wipe the confused look off your face, my friends, we’ve already covered this. Okay.
We’re going to use is, is, is, is okay. Then I’m going to put my root selector, which remember is just referencing this class name right here. And I’m going to say title.
Now I don’t even have to put a second item in there. Okay. We can just see if I’ve, if I’ve targeted the correct things and I have look, the title turns white.
Now what else do I want? I want their name. So I’m going to put a comma because remember inside of an is you can just make a list of items however many things you want to target and I am going to say root double underscore name and it’s also going to find the name as well.
If you’re confused, if you’ve got the confused look on your face right now go back and watch the training that covers is is and where and yada, yada, yada, yada, yada, right? We covered all of this in a previous lesson, okay? And this is just an example of us using what we’ve already learned, okay?
So now I have accomplished two specific tasks. I have put the executives in the front and I have styled them differently. But what I failed to do thus far is make sure that Jake is always at the beginning.
Jake needs to always be number one because he is in fact the owner of this team, okay? Or this company. So what I’m gonna do is I’m gonna steal this line right here and I’m gonna bring it down because I want to once again target the FR profile card delta with a data attribute attached to it that has a specific value.
The only difference is I don’t wanna target the title anymore. I want to target the name. And the name needs to be Jake.
Okay? So now you see once again I’m able to target elements based on known data. Things I can’t do with classes, can’t do with IDs, can’t do with programmatic styling.
I can only do it with data attributes. So now I’m finding Jake. What do I want to do with Jake?
Order minus two. Why does that work to put Jake in the front? Because minus two is less than minus one and thus it’s going to go ahead of the items that are minus one.
And now with some simple CSS, okay, some of you may not think that that’s simple, but with some simple CSS, I have accomplished my task. We took executive cards, which were randomly placed in this grid, we moved them to the front, we styled them differently, and then we made sure that Mr. Jake is always first in line.
And that is really, guys, the power, like not all of the power, obviously, we have more to talk about, but that is super, super, super powerful, okay? I used this technique when I was building a Monday through Sunday grid, and we have seven columns and we’re gonna generate all of the grid items in the schedule with a query loop, which means they’re randomly going to flow throughout the grid. I use data attributes to assign them to specific columns saying, hey, if you’re a Monday attribute, I’m assigning you to Monday’s column.
If you’re a Tuesday item, I’m assigning you to Tuesday’s miraculously. The power of data attributes should not be underestimated or understated or under anything else that you that you want. Okay let’s continue to move on.
Now we have to talk about displaying content. Wait a minute displaying content with data attributes. You can print, hold on guys, look at this.
You can print the content of a data attribute using the attribute function in CSS. Let’s use a data attribute to output the count in the notification bubble attached to the button below. Okay, well let’s take a little look-see at what we’ve got going on.
We’ve got a button, okay? And we have a before pseudo element attached to that button and the content of that pseudo element is the number eight. Yeah, it’s not a letter, it’s a number.
The number eight, and then here’s all of the styling to get this to look like a bubble, okay? But the challenge here is, what if this button is generated dynamically? What if we need the content in the bubble, like the notification, surely that’s gonna be generated dynamically.
We can’t just, you know, come in manually every time someone gets an email and throw a new number in the bubble, okay? I mean, what oompa loompa are we going to assign that task to, right? Nobody, nobody can do that, okay?
We have to make sure that this is all done automatically. All right, so what we’re gonna do is we are going to assign a data attribute. So I’m gonna select the button and we’re gonna get out a custom CSS here.
I’m gonna go to attributes, I’m gonna add an attribute. And what are we gonna call this? We’re gonna call this data notification value.
How about that? Again, you can name it anything you want as long as it has the data prefix. Okay, so we’re gonna say that the value of this is nine instead of eight, okay?
Now, obviously, I haven’t set this up in the backend, but you would wanna pull this value dynamically from somewhere, okay? So somewhere on the backend, some magic is happening, and that value, whatever the value happens to be, you know, it’s counting the emails that come in, that is passed through to here, just like we did with, you know, the title and the name of these cards. We pass those dynamically, you would pass this value dynamically, but I haven’t set up all that nonsense in the backend.
Why? Because this is a free course, right? You get what you pay for, we’re just gonna go static right now, but I am gonna show you how a data attribute works in this case, okay?
All right, so I’ve got the data attribute attached. Let’s go ahead and let’s take a look at that. So we’re gonna inspect.
You’re gonna notice, hey, it still says eight, right? We haven’t done any of the magic yet. But look at this in the HTML.
The data notification value is nine. And so what I’m saying here is that we’re, and if you’re wondering, we are gonna be able to take that number and actually print it inside of the notification label on the front end for all to see. And here’s how we do that.
So I’m going to go over here. I’m going to go to CSS. Let me go search for CUS.
That’ll bring this box up here front and center. Okay. Very simple, guys.
0:21:51 Very simple. 0:21:52
What do we call that data attribute? Data notification value. So I’m just going to remove everything that’s here and write ATTR, open parentheses, data notification value.
Now in Bricks, Bricks has trouble rendering data attribute values. I don’t know why, there’s a bug report on it, there’s a feature request, everything that we can possibly ask for has already been submitted. So you’re not really gonna see the magic happening in the builder, but if we go to the front end, guys, you’re gonna see the notification value has suddenly changed to nine.
And if that number was being pulled in dynamically, that number will automatically change every time the page is reloaded to show whatever the new value happens to be, if there is a new value, all right? But this is using data attributes to actually display content on the front end. Once again, things you can’t do with a class or an ID or really any other technique.
Ok, alright, so now let’s scroll down let’s talk about JavaScript interactions with data attributes. We have not talked about interactions yet. We have not talked a lick about JavaScript.
Ok, I don’t want to lose you right now. I want you to just watch and follow along. Once again, this is an area where you just need to know what’s going on.
You don’t need to memorize it. You don’t need to, there won’t be a pop quiz on this part of it later. Okay.
For those of you who are worried about, uh, you know, being confused. So just follow along, just follow along. I’m going to show you two different ways.
Now in BRICS, we actually have an attributes feature, or I’m sorry, an interactions feature, okay? Which basically, more or less, is, why is this thing, okay, thank you, I was like, stop, stop getting bigger on your own, I didn’t ask you to do that. Okay, so, Brics basically writes basic JavaScript for you when you use this interactions feature.
So what we have right here is a status badge, it’s just a block, it’s just a box. And it has the word, it has the class, I’m sorry, the class of status attached to it. Now if I go down here, you’re going to see that it has an attribute called data status and the value is status.
Okay. And then if we go into, let’s see, if we are, let’s go into, into here. Okay.
We don’t even have any CSS yet. Let’s go do this on the front end it says status more or less what we need to do is when this button is clicked we need to make this status change okay our statuses are going to be either success warning or danger the badge needs to change and the color of the badge needs to change so when I click success this needs to turn green and it needs to say success when I hit warning it needs to turn yellow or whatever our warning color is and it needs to say warning. This requires basic JavaScript but in Brics you don’t have to know basic JavaScript you just need to know how to do interactions.
Now we can do interactions using classes or we can use interactions using data attributes and I’m going to show you the failure. It’s like a fatal flaw when you go to use classes to do something like this. And the fatal flaw is not experienced when you use data attributes.
Okay, so follow along. Again, there will not be a pop quiz. Okay, so I’m going to click this button right here.
And I’m going to click right here. See this? Let me zoom in.
Interactions. Okay, so I’m going to add an interaction to this element right here, this button. And I’m gonna say, hey, when this button is clicked, I want you to do something, okay?
I want you to set an attribute. By the way, a class is an attribute, an ID is an attribute. There’s more attributes than just data attributes, okay?
So we’re gonna set an attribute, and it’s gonna be a class, and the value is going to be status double dash success, okay? Now, what is the target? The target is this badge right here.
Remember this badge has the class of status on it. Alright so I’m gonna go back to my interactions and I’m gonna say no we’re not targeting self we’re not targeting the button itself we’re targeting a different element for this thing to happen. This little scenario needs to happen on a different element.
Which element does it need to happen on? The status badge, which is this thing right here. Okay, I’m going to go ahead and hit save and we are going to refresh and I’m going to inspect this and you’re going to watch the magic happen now.
Okay, so here’s the status badge and when I click this button, you’re going to see a class. Look at the classes right now. Brixie button, status, Brix button, Brix background primary.
Okay, I’m going to click success and look, it’s added a class called status success. And if I go in here, all right, we’re gonna get out of interactions. We’re gonna go on this badge right here, and we’re gonna say, all right, we’re gonna say when this class also has status success, all right, we’re gonna change the background color to our success light color.
And we’re gonna change the color color, like the text color, to success dark, okay? And we’re gonna save, and then we’re gonna go back to the front end, and we’re gonna click, and look, it changes to green. And the text changed to dark green.
And so now we just need a warning and danger version, okay? So I’m gonna zoom in again so you guys can witness this happening. I’m just gonna copy and paste two more times.
We need one for warning where this changes to warning light and warning dark. And then this is instead of success, we need danger. Okay, there’s gonna be danger light and danger dark.
So I’ve got my styling in when they have this class, we’re going to change the styling based on the class. Okay, now I am going to go here and I’m going to get rid of let’s go get rid of interactions. I’m actually just to save time, delete those two buttons and then duplicate.
Duplicate and duplicate because that’s going to give me the interaction that I already programmed, and I just have to change the values here. On this one, which is going to be warning, I’m going to say we’re going to add status warning instead of status success, obviously. Then on this one, which is danger, I’m going to say we’re going to add the class status danger.
And now all of them have interactions. Okay, so I’m going to refresh here. Now I don’t need that tab anymore.
I’m going to refresh here. Let’s click on warning and look, it’s now the warning color. Let’s click on danger.
Now it’s the danger color. Okay, let’s click on success. Oh, oh, fatal flaw guys, fatal flaw.
Look, now it’s got all the classes. Every time I click a button, it’s adding the class that I told it to add. You know what it’s not doing?
It’s not removing the other classes that existed. And we find ourselves in a situation when we talk about key value pairs, right? The key is a class.
The value is now multiple values. Status danger, status success, status warning. We’re in a situation though where there should only ever be one value.
Classes are just sticky notes, sticky notes, sticky notes, sticky notes. It’s not a situation where I have to replace the value, where I only have the option of having one value. And thus we run into this problem where we would have to add extra logic to say okay not just add success class but remove warning and remove danger and then the more options there are the more convoluted this all becomes.
What we need is a scenario where we just take a value and replace it with a new value and there can only ever be one value and then we don’t have to worry about the logic of removing certain values and replacing them with other values and it’s just we can keep it very very very clean and data attributes is exactly what affords us that power. Okay so we’re gonna go in here we’re gonna set this up with data attributes now okay I’m gonna close the interactions tab what I’m gonna do is I’m gonna change the CSS a little bit. Okay, so root and we’re going to say, going to attribute targeting now with the attribute selector.
We’re going to say data, let’s call it data status. Okay, data status equals and we’ll say success. So data status equals success.
We’re going to do these things. All right, I’m going to copy this. This makes perfect sense.
I’m going to paste and I’m going to paste and then this says warning and then this says light. So all I’ve done is gone from class based targeting to attribute based targeting. And now you’re going to see how the logic of the JavaScript stays very, very, very clean in this scenario.
Okay, so what I’m going to do is I’m going to come up here to interactions, I’m going to add an interaction, and I’m going to say on click, what are we going to do? We are going to set the attribute. The key is data status.
The value is in this case success. Okay. And we are going to target the status badge.
All right, save, just like that. And then we’re going to go refresh. I click status.
Look, it changed to green. Also I get the benefit of it actually saying the value. Okay, that wasn’t happening when I was using the class.
How are we doing that? We’re doing that with that content attribute that I just showed you a few minutes ago. If you’re already confused, go back and watch from a few minutes ago where I talked about outputting the value of a data attribute on the front end, okay?
So now all I have to do, let’s go ahead and delete warning, delete danger, let’s go ahead and duplicate, duplicate. This is going to be warning. This is going to be danger.
And all I have to do is come in here and adjust the value of the data attribute. This is going to be warning. And then this is going to be value danger.
Okay, so I’m going to go ahead and save. And now what I want you to see warning is warning, danger is danger, and success is success. Now, is something wrong with the danger styling here?
Okay, let’s figure out why is that not the right color when it’s danger attributes. CSS, we’re gonna go in here. Ah, data status equals light.
No, it’s not what we want. Data status equals danger. Okay, save, go back.
So danger gives us danger. Warning gives us warning. Success gives us success.
And look what’s happening right here. You can watch right here. Okay, let me zoom in.
Look right here, watch that change, okay? Warning, see it? Danger, success.
And we’re in a situation where it’s like, I guess I wouldn’t say it’s binary, right? But we can only have one value. There’s just one value that exists.
We can’t have multiple values. And so it’s swapping the value, that’s it. And so we don’t run into the problem that we ran into when we were using classes, not to mention we actually have the power to output the value of the data now.
Now you see that it’s all lowercase. I mean, we could fix that with CSS. So we could come in here and this is where we can say something like root.
We can say root data status and then we just take out a value. Just say, hey, if it has the data status attribute, then what we’re gonna do is we’re going to say text decoration, no, text transform, text transform, I’m sorry, text transform, capitalize, okay, save, refresh, and now we’ve output it with a capital letter. That’s one way that we can handle that.
And notice, how am I doing that? Well, I’m targeting the attribute selector without a value. We already discussed how that’s a possibility, and here’s a use case where we may exactly want to do something like that.
But that’s not our only option. Let’s take a look at another option. So I can say, remember when I was doing my JavaScript logic right here, I can, and this is actually, I’m doing this for a very important reason because I want you to see it break.
It’s about to break. So I’m going to say value equals success with a capital S. Then over here, I’m going to say value equals warning with a capital W and danger equals D capital D.
Okay safe refresh. Let’s let’s go ahead and hit success Notice it changes to success, but we lose the color why it’s capital Why are we losing the color because our styling in our CSS? Okay, let me go Into our custom CSS right here is looking for the lower case version.
So the question is do I have to do this? Will this fix it? Yes, that will fix it.
But do I have to do that? No, you don’t have to do that. I’m going to show you a little trick, okay?
If I come over here and don’t ask me why this is, okay? But if I come over here and I hit space and I put the letter I. You know what I is going to do?
I is going to tell this, hey this data attribute value that we’re looking for is no longer case sensitive. Just find the value, don’t worry about capitals or anything else, okay? I’m going to go ahead and hit save.
Let’s refresh on the front end and now I have capitals in the output and even though my CSS is looking for lowercase variants, the I is telling it don’t worry about the capitalization just find the value and style it like this okay so that’s another little trick that you need to know when you’re using data attributes all right is there anything else related to this that we need to discuss I don’t think so we saw how interactions in JavaScript are easier when using data attributes we saw the fatal flaw when trying to use classes for doing this sort of thing. We see that we can output actual values. We saw how we can target specific elements and style them.
We’re on a roll. We’re on a roll. What we need to talk about now is the superpowers of these attribute selectors.
I’m going to go back into the builder here. We’re going to get out of custom CSS. We’re going to scroll down and start talking about superpowers.
Okay. You can target elements with a specific attribute. We’ve already looked at this, okay?
So for example, this link has a title. This link does not have a title. You can find a title, by the way, on a link in HTML is an attribute, right?
So I can identify all links with a title or I can style all links with a title. I’m gonna go into CSS here. I’m gonna put in my root selector and then I’m gonna look for A, those are links, okay, with a title.
All right, if the A has a title, I want you to put a border around it. Border, five pixel solid, red. Notice it found the link with a title.
The link with no title was not found, was not selected, let’s say, okay? All right, so you can target elements with a specific attribute. That’s really important to know.
You can target any link with a class. You can target any item with a class. Watch this, okay?
So in this section right here, this root section, which is this whole section that I’m selecting, right? I can find any element with a class. Border, five pixel solid red.
Everything with a class, which is every item in that section or in that container, every item has a class, thus every item got selected. This is like a very base level attribute selector example. Okay, all right, now let’s go ahead and delete that.
Let’s move on. Can we target elements with a specific attribute with a specific value? Okay, yes, we already saw us do this with the data attributes where we targeted a value of executive or the name Jake, right?
But you can see some more examples here. We have a class equals button. So we can find a, not just elements with a class, but a class, a specific class, in this case of the class button.
Or we can find a link with a target reference, an href, right, the path of the homepage. We could identify all links that are linking to the homepage and target those differently, right? Like maybe we want to put a little cute little home icon next to the links because that’s a link to the home page We could do that with CSS attribute selectors.
Okay. So here you see a link to the home page Here’s a plain link and here’s a link with a button. I’ll zoom in link with a button plain link link to home page Okay, so let’s see what we can do with our custom CSS.
So in here, I’m going to find all a’s that have an href of the homepage. Okay, and I’m gonna say border, five pixel solid, and red. And what we’re gonna see is that sometimes it has trouble actually showing this inside of the builder.
I’m gonna go to the front end here. I’m gonna scroll down, and hopefully I’m not eating my words here. Okay, link to the homepage.
Let’s inspect this and see what we’ve got going on. Okay, um, href, oh yes, yes, okay. This actually is not linking to the home page, okay.
That’s why it did not find it and select it. So link to the home page, let’s go back and let’s set that URL to forward slash. Oh, now it’s being selected.
It has the border because now it is actually in fact linking to the home page, okay. So you see, there you go on the front end, because now if we inspect it, you’ll see that it is in fact linking to the homepage. Okay, that’s absolutely fantastic.
Can we find a link with the class button on it? All right, let’s go back to our CSS and let’s find out. Go down, root, a, attribute selector, class equals btn, and then we’re gonna style it border five pixels solid red and a womp womp.
Why doesn’t this work? Well let’s go to the front end. Let’s refresh.
Let’s inspect and let’s see. Oh it’s because there are two classes. Two classes here.
Okay so what we need to do is actually it can’t be the classes equal to button. And then we’re like, is that even possible? Yes.
So we’re gonna scroll down and look at this. Target elements with an attribute value that contains a specific string. We can also do one where an attribute value contains a specific word, okay?
So let’s take a look at this. We have link with class equals button. Let’s, that’s exactly link with class equals button, the same scenario up there.
So let’s do this. Let’s target our root and let’s say, A attribute selector, and we’re going to say class and then contains. The way we do that, star equals button finish style border, five pixel solid red.
And it finds all of them because they all contain the class button. Okay, so the specific string is button. It’s going to find it everywhere.
What if we only want the ones that have the double dash? Okay, I can just take out button, put in double dash, and now it’s only finding the ones that contain double dash as part of the string. Okay, now there’s another way that we can target this called contains a specific word, right?
So let’s say I wanted to find all of the data name attributes that contain the word Kevin. Notice that this one contains Kevin. This one contains Kevin, but is it actually an individual word?
Let’s find out how this behaves. So I’m going to say find in this in this section in this container right here find the data name that equals Kevin okay oh and I’m gonna do this little pop quiz action for you little pop quiz okay border oh and it’s not equals Kevin it’s tilde equals Kevin all right that’s gonna say hey find this word all right so now we’re going to go border, 5 pixel solid red. Why is it not finding anything guys?
5, 4, 3, 2, 1. Okay, let’s see if you got it right. It’s looking for lowercase Kevin.
What if we do uppercase Kevin? Look at what is found. Okay, and look at what is not found.
This one was not selected. 0:42:41 Why?
0:42:42 Because this is part of a string, but it’s not an individual word, right? So two things here.
Number one, can I keep this lowercase pop quiz, pop quiz? If I want to keep this lowercase, but still find the value, what do I do? Five, four, three, two, one.
Yes, you’re right. You come down here, you pop a little I in that says, Hey, we don’t worry about case sensitivity anymore. Just find the word Kevin.
And it found it. What if I want to find this one right down here right well I can’t use the tilde I got to use the star but the star is going to find both of them right so what if I want to find this one down here but maybe not this one okay is that even possible can I do a little not situation right not data name tilde equals Kevin okay BAM Okay, bam, just like that. So now I’m saying, hey, find the one in the string, don’t worry about case sensitivity, but not the one that’s not in a string, not the one where the word Kevin is actually stand alone.
Okay? I mean, the power, the nearly unlimited, I’m not gonna say unlimited, the nearly unlimited power that this gives you. And this is like, beginners just don’t know this stuff.
Intermediate, they just don’t know this stuff. You, my friend, are being elevated day in and day out thanks to Page Building 101. I mean, it’s a free course.
Like, this is, does it get any better than this? Have you thrown up a like on every single video? Have you tossed up a like on every single video in this course?
That would be really, really helpful. Okay, all right, so let’s continue on. Can you target elements with an attribute value that starts with a specific string?
For example, find me all of the links that start with HTTP, because I wanna know where the links are on this site that are not secure, okay? All right, so we’re gonna go to root. We’re gonna target As with an attribute.
Href, by the way, is an attribute. We already talked about that, right? With a value that starts with, okay?
That’s this symbol right there. I had a hard time getting that symbol onto the page. That starts with, all right, what is that, a caret?
Is that called a caret? All right, so we’re doing the caret symbol, caret equals http colon forward slash forward slash, square brackets, open up the curlies, border five pixel solid red. And there is the link with HTTP.
Okay, we can prove this on the front end. We go down. It’s not just identifying the text right here, guys.
It’s looking at the actual href. This one goes to h, let me expand this out a little bit further. 0:45:35
Okay. 0:45:36 This one goes to http.
google. com, the other two go to https. google.
com. That’s exactly what it’s looking at right there. Alright, let’s scroll down.
Can you target elements with an attribute value that ends? Right, we just did starts with, that ends with a specific string. Yes, you do that with the dollar sign.
So I want to find the one that has a class that ends with the word dark in the string. Alright so I’m gonna go root we’re gonna find a a because I’m looking for links right with the attribute class dollar sign equals and then we’re gonna go dark so this ends with the class has to end with the word dark border five pixel solid find it there it is right there. If I change this to light, it’s gonna find light, okay?
So again, ends with is just as powerful. It’s there just like begins with is, okay? Just like contains in a string, just like contains the word.
There’s so many options. We have to know what these options are, know what they exist, okay? I already talked about removing case sensitivity from an attribute selector, so we don’t have to cover that again.
And then we’re just gonna talk about some more examples. We’re gonna wrap this bad boy up, all right? Let’s get back into the canvas here where we can see bigger what’s going on.
So images, right? Image source equals source is an attribute. You can identify specific images.
You can identify images that end with specific extensions, like find me all my web Ps, find me all my JPEGs, find me all my GIFs, whatever, and it is GIF. It is not JIF, my friends, it is GIF, okay? Image alts, right?
On the image, there’s an alt text. That alt is an attribute. You can identify images based on alt data.
What about dimensions, width and height? You can figure out, show me all images that don’t have physical HTML dimensions. Languages, if you’re doing a multi-language site, you can style if the language equals in US.
If the language equals in Espanol, you can target based on that attribute, the lang attribute. Inline styling, inline styling is an attribute. Style equals, right?
Figure out, hey, show me all elements that have this specific inline style. What about title? We’ve already talked about that in one of our examples.
Date time on events, for example. Find me everything that has a date of a specific date, okay? Is an element disabled?
Find me all those disabled elements. I want to style them a certain way. Okay, so this is not even all of the options guys.
This is not even all of the options, but this is going to be, you know, very common scenarios that you run into where you’re going to want to use these specific attribute selectors and you’re going to want to use them in various ways. And remember, these can be used with is, they can be used with where, they can be used with has, with not. You can really take what you’ve learned in other areas using these kind of pseudo classes, right?
And and you can expand on what you’re learning in this episode. We already saw like how different Combinations of things unlock even more power. Let me go back to camera We are winding this course down.
We are winding this course down you are You like I said you are being elevated well above beginner well above intermediate status with this stuff. Okay. It is important though that you don’t just let this go in one ear and out the other.
Pull up a code pen, pull up a bricks installation, whatever builder you happen to be working in, play around with some of this stuff, exercise it, right? Don’t just watch it, exercise it, experiment with it, make it happen in real time on a real install with your real fingers doing the work, okay? That is going to ingrain it into your brain.
Don’t just watch it and say, hmm, that’s nice, that’s fun, that’s cute. You got to actually do it. You got to practice it.
And then it’s going to become second nature, okay? We got a couple more episodes left, maximum. One of them is going to be a full landing page build, so make sure you stick with me.
But seriously, if you’re getting a lot of value out of this course, if you think this course is worth a tremendous amount and the fact that you’re getting it for free is just mind-blowing, please like the episodes, please like every lesson in this course, okay? Pay with a like, pay with a comment, pay with a share. That’s all I’m asking you to do.
Pay with a like, pay with a comment, pay with a share. It takes five seconds, okay? Put this content into the hands of more people.
That’s all you’re tasked with if, if, if you’re finding value. I’m Kevin Geary. I’ve had a lot of fun in this episode.
I’ll be back very soon. We’re gonna wrap up this course. We’re gonna wrap up this course.
0:50:44 Peace.
