 A while back, I created a horizontal media scroller that allowed us to sort of scroll through elements either one at a time or we could do groups of elements. And in that video, I got a lot of questions about having a buttons that could let us do it. So you click the button and it does it instead of having to actually scroll horizontally. And then I saw that Kyle of WebDeb Simplified already did that where he cloned the Carousel UI from Netflix. And well, I don't want to copy what Kyle's up to. It did get me wondering, could I do that with CSS only? Hi there, my front end friends. Thank you so much for coming to join me once again. And if you're new here, my name is Kevin and here at my channel, I hope you fall madly deeply 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 try and push the limits of what we can actually do with CSS. And we're gonna try and copy that Carousel from Netflix, the UI, including the indicators showing us which sort of section we're on. Only thing I don't think that we can do is to infinitely cycle. We have to go back and go forth because we're not redoing the DOM or anything where we sort of have to do that with JavaScript. But everything else, I'm pretty sure we can do but I haven't actually done this before. It's gonna be my first attempt. So we're gonna go through sort of my thought process and I'm gonna talk my way through it. You can see how I can overcome the problems I do and all of that. So let's go and jump right in. Now, as you can see, I'm not starting from absolute zero but the HTML that I have in place is fairly simple and we're gonna have to add to it to actually get it to work. And what I did is I just took the horizontal scroller thing, I broke it down a little bit and have a little bit less going on here. But basically this is what I've done is I have these media groups and inside each media group, I've put a media element, I guess we just have images so I guess it could have just been an image but I'm gonna have this media element. So we have a media group and actually let's go and let's highlight these or we'll see them a bit more but this will sort of become a bit more obvious but it was just be boring watching me do this. So I just right now have four media groups and inside each one of those groups, I just have a whole bunch of media elements, four or five different media elements inside each one of the groups. I've also added this SVG down here which is using symbols and it's just for the left and the right arrow that we're going to be trying to grab so nothing too complex for that. If you've never seen this before, we'll explain it a little bit once I actually start using it but basically it lets us have an SVG saved at the bottom within our file, that we can then use over and over again within our file and you don't need like the big long SVG path every time that you wanna use it but we'll see that sort of as we come through. Now when I tore this down, it looks like I did a little bit too much so I'm just gonna grab all of this so these four groups, what's this closing? See, I didn't, so yeah, we're gonna grab these four groups here and I'm gonna do a control shift P and then I'm gonna right emit and you can see I have a whole bunch of stuff that I wanna wrap with abbreviation and then I can just choose a div dot, what do I wanna call this? It was my media scroller, okay. And so that media scroller is the parent to these four groups that we're gonna have in there and I'm gonna keep those claps as much as possible just to keep it nice and clean in here and we still have my SVG there, perfect. So let's come and sort of highlight how this is going to work a little bit or how I see it working. This is just generic things, so let's come here and we'll do my media scroller. And so media scroller is going to be a display of grid which when we do that nothing actually changes and we're gonna do a grid template, not grid template columns, we're gonna do grid auto flow, auto flow of column. So that should make each one of those groups actually go one next to each other. So here we have my four groups coming in and just to show that let's do dot media group and give that a background of lime green. A background, Kevin, border of three pixels solid lime green. And so we can see there's those, the four media groups right there. Now what we actually wanna do on these is use the same thing right here on these media groups. So that should bring them and put them all next to one each other. So what this is doing is saying I'm a grid and these media groups should all go one next to each other and then my media group, I'm doing the same thing and I guess we could have utility class there that would actually make more sense instead of repeating it. But this one's doing the same thing but within each one of these boxes. So then these images are all going next to one another. Now my images are slightly different sizes and I wanna make sure because of that I wanna make sure that each one of them is the same and we probably wanna do the same thing here. What we'll do is grid auto column is going to be one FR. So columns, grid auto columns is one FR and we're gonna put that same thing right here. And again, maybe this, why don't we do that? Perfect. And I guess, I mean, what we could even do for that is we could do a utility class, are we gonna say media group and they'll share all of those properties. Media group, we're gonna keep that lime green for now. Order solid lime green pixels. Orders are fine because they can go in any order. And on my, okay, so we get that. So on the media scroller only now, media scroller. So the big one, the thing that's important is actually this isn't gonna go there. Whoops. I want my grid auto columns to be different. So okay, we can keep that there and then here we'll just do my grid auto columns. On this one is one FR. So it just means all of them should be equal. On the media scroller itself, my grid auto columns is going to be 100%. And that means I want each one of these media groups. So it's making four columns. I want each one of those columns to be the size of my media scroller itself. So there we go. And it's overflowing out the side of my page. And you can see I get a horizontal scroll bar on my HTML now because it's going sideways. But we can see that the border here is coming because each one of these groups is fitting into one of those columns. The columns are at 100% and so we get that. Cool. So that's a good start. Let's fix up the inside here a little bit. I'm gonna say that my media group IMG. So should we do that? Or we'll do this to be safe. Is going to be a, I think we can do width 100% because it's gonna fit that column of one FR. And then an aspect ratio, aspect ratio. And we're trying to recreate the Netflix which I have off screen here. So we're trying to do something like this, right? So I think they follow that 16 by nine type thing. So we can do that, 16, nine to save. Of course it didn't work, media group IMG. There we go, they're all 16, nine now. They're not directly nested in there. Oh, we can do media element. Media element, I think I called it. What did I call it? Media group, media element, yes. And then my image is in there. So we'll do that, media element. Any image that's directly inside the media element, we'll get this. And then we'll do a object fit of cover just to make sure you can see they don't stretch the images that way. I don't think Netflix is doing that. They're probably using the right sizes of our images. But, and of course if we look at Netflix here, there's a small, small amount of space and they have those rounded borders on there. So let's come here and we'll say media element. And again, maybe my image could have been the media element, but if we were doing the whole thing and having the hover effects and stuff that would come on that, obviously things would be a little bit different. So let's just say the media element itself would be, I will put a border radius, border radius. It looks pretty small. And we'll do an overflow of hidden just because that lets our images keep that border radius. It's hard to see a little bit, but it is there. And we're setting up our grid on the media group. We have my media group here. We can throw in a gap, gap of it looks probably about the same. It's a pretty small gap to create that space in between them. So that looks all right. Now, there won't be any gap actually between these. Well, it's probably the same gap actually. So let's bring that gap here. Oh, no, we need it in both places. Yeah, so that means we can bring in here, gap of 0.25 rem. So that way the gap is between the elements here, but that same gap is going to be over here as well. So that sort of, you know, as we go through these different groups, it's gonna keep the spacing. I think that should work pretty good. All right, now obviously we don't want this horizontal scrolling this way. So let's come and we'd want it all the way up on the body actually, overflow X of hidden. So we can't see those now. And we need a way to get there. And this is where things diverged from how I did it last time. Because when I did this last time, we were adding an overflow on the media scroller. Here we can do an overflow auto. And then we get scrolling within here. And we get like a, I'm in Firefox, so it's hidden unless you hover, but see, we get a scroll bar that goes this way. Now we don't want that. Turn that off. I don't want anything showing me that we can do it. We do wanna actually, hmm, this might not be right. Cause I wanna be able to see the next one here. We'll play with that a little bit later. What we need to be able to do is add buttons or whatever, so we can actually click and go to that next section. And in this case, because it's CSS only, ideally that would actually be a button, but if we're doing it CSS only, it will have to be a link. And so what I'll do is I'll set one of these up. We'll set up group, we'll have to do it two times, but just to show you how it's gonna work. Or actually, okay, get it together, Kevin, focus. Each group is going to get an ID. ID is equal to, and we'll just say group one. And let's just paste this on all of them. So each group will have an ID and that's gonna allow us to move between the different groups. So then we can have a group two, group three, group four. Okay, so that's good. And then what we can do is we're just gonna try this down here. Let's throw a link. I hope this works. So we're gonna put a link to group two and let's just put the text here next and we'll fix that up. So there we go, we get a next coming in, so that's good. And if I click that, it should actually go there. Uh-oh, uh-oh, it scrolled the whole page. Okay, let's just allow us to go back. I could just refresh the page, but let's put an A and we want this to be my, it's going to go to group one, group one, and that's previous. So if I click that, it goes back. Now what I didn't think is that the whole thing would actually shift the page over. That's a problem. How do I fix, how do I stop that from happening? It's because that one actually is over. Okay, let's see. We did overflow hidden on the body, but let's take my media scroller itself. Let's turn off that. I don't want that on my body then overflow hidden X. So now we can scroll again, we can see that. So if I click next, it goes there and it goes back. I don't want the overflow there. I want the overflow, we're gonna do it here, media scroller overflow X is hidden. So now it's the same. If I try and scroll right to left, nothing's working. There's no way, there's no scroll bar coming up anywhere. But now, there we go. Okay, so the overflow is happening within this rather than the whole page. Because when I did it at the page level, what was happening was everything was overflowing on the body, everything was overflowing on the body itself off the side of the page, but it was just hiding that. So if I click next, it was going to those things that were hidden away. Now the body doesn't have it. What we're saying is that the media scroller itself has an overflow of hidden. Now I don't know why I didn't have to set a width on this. That's interesting that I didn't have to do that, but I'm glad that it's working. And now we can click next and previous and go back and forth between them. So what we want to do is I said I'll set it up for one and then I'll just copy and paste things and we'll speed that up. But instead of having that next like this, what we want to do is an SVG. So SVG, SVG. And then here I can do a use href or is it source? I don't do SVGs a lot. We'll try an href and see if it works. So use and then we're going to do, and you might see old ones where it's like, oh no, wait, is it an href? We'll find out in a second. There was an older syntax here that had the x something or other, but modern browsers all support, I think it's href. And it would be my ID of next, I think. And what that's doing is it's going to go and look for a next and here's my ID of next, which is my next symbol here. And so let's hit save and see, it worked, nice. So I love this a lot because again, it lets us reuse, this is super easy to look at and understand. And then we can do the previous. Now, because this is just a symbol it's visually there. Again, this ideally would actually be buttons and we would probably want JavaScript for this, but I'm going to come in and add an area label on here anyway of next because visually this tells us next, but there's no, if a screen reader or something were to stumble across this, there's no meaning to what this is. It's an SVG that doesn't mean anything. So we're just adding a little bit of context. And I'm not sure if anybody knows in the comments you can say that maybe an area hidden would be appropriate. On the SVG, I'm not entirely sure one way or the other. So yeah, something to look into potentially. So here we can do the same thing. This is my previous. So then here would be my SVG and then a use. We have to type it out. Use href is equal to previous, oops, previous, close use. So now if we click there and then we get the arrow there, we can go back. Cool. So yeah, I'm just going to quickly go through and put this in all my groups. Just so you don't have to watch me do that and I'll see you in just a second. All right, so now it's working. We can go through that way and then I can go back this way. Just in the last group, I only included a previous one and in the first group, I only included a next. And I just made sure to update the IDs everywhere so they're pointing in the right direction. Now this isn't like the best way to do something manually like this, obviously, but if you were using like a static site generator or something, there would be a, and you had these groups stored rather than like hard coding it this way, you could actually automate this a little bit better, right? Or, you know, it doesn't all have to be like super hard coded in this way. You could just add more media groups and have the, it should be able, you know, you should be able to build the logic in if you really wanted to. But anyway, we're experimenting with CSS. So we're doing it this way a little bit. Cool. So that's actually working now. It would be nice if I clicked on these and it were to scroll instead of snapping because it's not the nicest UI doing it this way. So let's go back to here and where I have the overflow, let's add a scroll behavior. And that should work, I think. Fingers crossed, because if not this whole thing falls apart. Ha, cool, right? There we go. Super duper. So now we can see that we're smooth scrolling between these different groups. So if we come in and look at the Netflix one, if we click on the arrow, it scrolls over, scrolls over. So we're kind of close to that actually, though I think that we've done the easy part and now it's the hard stuff that's coming. One thing that's obviously different is when we click on them, we don't want the arrows to slide with it. The arrows should look like they're always there, right? So when I'm here and my, oh, look, I broke the Netflix layer. If I go here and I click that, it slides. Yeah, and the arrows are always staying there and you can see them, they're sort of everything's sliding underneath that. So the media scroller, I'm gonna add a position of relative and I just realized I made a mistake a little bit. So I didn't give these links classes or so let's do that really fast. I'll do this, I'll just explain. I'm gonna do a class of nav link space. This is my next, I'll just do this really fast. So I'm gonna do a nav link just so it's, nav link's not a good one. Next, let's just do next and I can just combine them as a next and a previous. So then up here we can have the, this one will be a class equals, class equals previous. That's fine. Yeah, we'll style them like that, that's okay. So I'm just gonna add that really quickly to all of them because we need to select them and style them and position them and stuff. Okay, so I think I got the class on all of them and then we can style them a little bit. Just as I'm doing this, just a really fast thing of like, people ask me sometimes when I do CSS only or like, why do I try and do something without JavaScript? It's not always the most practical solution. Sometimes it's just to see what we can do and you learn things by doing this that maybe you wouldn't use in production exactly like this, but you learn how you can do certain things that you would have never have tried and then it can actually like a little trick of this big thing that you built can actually become really handy when you try and do something else or sometimes even like just being able to do this with like the smooth scroll, you realize you can do that, maybe you find a different way or a different time you might want to use that or even you know, link that in with the JavaScript behavior on the click or whatever it is. There's different things that could be uses that can come out of this stuff. So it's not just about challenging yourself which is always fun to do but it's about sort of pushing the boundaries. You go further than what you might do in production but you end up using finding things that you could use in production. So next in previous, we'll both get a position of absolute, absolute and that should be now relative to that green box they've vanished, that's okay. Where'd they go? Zed and X of just to make sure they're on top. Why are they gone? Okay, so let's just next, next we'll get a left of one or zero, pop of zero. Where the heck did it go? Media scroller, off screen right now. Media scroller, group one, yeah, group one, where is this? Okay, let's just take this position relative off for a sec and it's here. That makes sense. It does make sense that that's here because now it's for my page and then when I do position relative, it should be relative. Oh wait, I'm on group four here. It's, they're all here basically stacked on top of each other I think. And when I click that, group four, no wait, something's funky is going on. I'm only seeing the next and not the previous. So let's just, let's see if I can get my previous ones in here too, dot previous, right of zero and a top of zero. Just so, why is it there? This we should put after, just for me. Actually previous and next, that does make sense that way. With min content, we'll make them vanish because there's SVGs, width of three rim. Previous is on the right. Oh, whoops, this should be left. Okay, so at least things are, and this should be right. Things are a little bit better, but now it's not scrolling. That should be group three, group two, group one, I've broken things. Okay, one second, let's try media container. Don't like having to do this, so let's just see if this does the trick. So I'm gonna take the position relative. I don't get why that's not working. If this works, I'm not 100% sure why, but media container, position relative. That bugs me, why did that work? My buttons are mucked up, but why did the other one, and okay, the reason this, I don't 100% know why it's working, so what I wanted to do is pull the arrows. The arrows were being positioned relative to like the scrolling element itself, right? Which, Ion's collapsed everything, so they were all positioned within this guy, and I sort of, which contained everything, and as like, it worked when it was with the body and they were floating up here. So by putting the container and putting that as position relative, rather than this, that position absolute is linking to this container. So they're not paying attention to this scroller anymore, they're paying attention to this guy now, which is sort of working. Now the issue that's come up is all the buttons are overlapping each other, which we don't want, and this is where things get really tricky. But let's make the buttons look better, because that's easier, and I sort of know how I'm gonna do that. So we'll say background is RGB 000 over 0.2 maybe, because in the Netflix thing, they're kind of transparent. Let's keep, let's put some padding on here. Padding of, we'll do padding of zero and one RAM maybe. That doesn't look too bad actually. Let's turn, we can keep those green borders actually, I wanna keep that on just for the moment. That actually doesn't look too bad. I think the Netflix ones are a little bit small. Oh, they get bigger on hover, I didn't realize that. Oh, we don't have the background. I thought the background was always there, but it's not. The background only shows up on hover, huh, huh, huh. Okay, oh, we still have this guy to do too, that indicator that sort of shows us where we're, which slide we're on. Okay, I realized I was going off screen a little bit there. I do apologize, there we go. So we have to do that, and we have to create that navigation thing that's at the top there. Okay, so when we go here, there's no arrow, then there's an arrow and then it gets bigger and the background gets darker. So let's say these actually have an opacity of zero, then my media, scroller, hover, I guess we'll do media, scroller, focus. No, we can't focus on that. When we hover on the media, scroller, this won't be the most accessible thing, but when we hover on the media, scroller, so actually here what I wanna do is next and then do the same thing with previous, right? And instead of doing it, we have to repeat yourself that way. We can do a where selector or you can use an is selector.next.next previous, and that should actually work. And then so when we hover, nothing's happening yet, we wanna give those a opacity of one. Copy that, or not copy that, we just wanna move that down. There we go, okay, save. So now there we go, they show up, but I don't want them to have a background either. So here the background will actually be, or it's, yeah, we'll do zero, so it's there, but it's transparent, which is if we look at Netflix is that type of thing where when we hover on top, the arrows are gonna show up and then when we hover on that, the arrow gets bigger, the arrow will get bigger and get a background on it. So the opacity comes up. So this is selecting, again, it's selecting my next and previous that are inside of my media scroller that are on hover. And then we can just use the same selector actually and say those guys on next, where next previous, oh, I don't know if this works, I've never tried. Hover is a background of RGB 000 over point two. I think we said look pretty good. So now we hover there and then, ah, perfect, we'll make that point three. And we can also then say the hover SVG. So the SVG that's inside those links will get a transform scale 1.1. So it should, the arrow should get bigger when we hover, maybe a 1.15. And that just means, whoops, we probably want to duplicate that and here would be without hover scale is one and we can do a transition of transform 150 milliseconds then yours fine. So we can see it gets a bit bigger there on hover, maybe that we'd even do this faster 75 and make that a two. Perfect, I think that looks pretty good. So we get that same thing on the other side. Okay, so that's styled nicely. So to get it to work, this is where things are gonna get kind of weird. And if you haven't seen the where selector before, I've talked about it previously. So we'll throw a link in the description about that and again, this could also work with is, is and where exactly the same, but is this counts for specificity whereas with where this doesn't count for specificity, but otherwise they're identical. This is where things get hard because the problem now again is all the buttons are stacked on top of each other. So we just have, we're seeing all of them basically. So what we're gonna actually have to do is a display of none to make them all go away. Display of none. And the advantage of display none on this also will mean that we can't, the display none, yeah, the display none on them means we also can't like tab to them by accident and muck up our things that way. So they're not in the DOM at this point. Now it's not gonna work for the first slide and the first slide and the last slide. The first slide and the last slide might be the most problematic. I don't know, I think it's only the first slide that will be problematic actually because display none, but we need something to click on. So actually let's turn this off for a second and let's just go here to back. So we're on my first group right now and what we can do to show you how I think we can do this is I wanna use target. So I'm gonna do media group target and when it's targeted, we're going to do a border, color, border, color of red since we already have a border on there. So if I click on this arrow, see that one actually now has a red background, red border on it. So my group four has the red border. When I click that, it's gonna go really fast but it's gonna turn off the border on that one and turn the border onto the other group. So the target is when you use something within a page so you have an ID and you're clicking on like an anchor link that's going to something. That thing is the target. So I wanna take advantage of that and I wanna say that if something is the target that the, I should have used SAS on this one so I could use nesting, media group or even post CSS, something that'll allow nesting, media group, target, where, dot next, dot previous, display block. Ah, ha, ha, ha. Okay, so I have a target now because I didn't refresh the page. So we have a target of group three. So that means they're here. And if I click that, they're there. Cool, right? And now it's actually working and we, oh no, it's still not working. Why not? Why not? Where's this one going? Where's this one going? Oh, that's my mistake. Oh, did I not need this at all? One second. I know my dev tools were off screen. Group one has the idea of group one. We're going to group two. ID previous is going there. Group three, group three previous is going to group two. That's good. And why here? One second. Group four, oh, okay, that's, oh, the group four one is still, so my link here, when I'm clicking on that, I'm still getting the group four link. Why am I getting the group four link? We should have display none. Oh, I, Kevin, let's turn my display none back on. Okay. So now I was all excited and nothing had changed yet. So here's my group four. We're good. Group three, we're good. Group, it's working. It's working. We can go that way. We can go that way. We can go all the way to the beginning and we can go all the way back the other way. Perfect. So in this state, everything is good. This isn't what I was worried about. Let's turn off my background colors now. If you're a little bit confused, I'll try and explain this again. We'll turn that off and my background color border. Turn you off. Okay. So what's happening is when I click, as long as something is targeted, actually let's go and look in the dev tools here. So if I look in the dev tools and we go into my media container and then my media scroller, and we have my media group, we're inside group three right now. So in group three, we have this previous link and my next link that we can see that are right there. So if I hover the link show, the link's going too far down. Why do we have that padding on the bottom? We'll figure that out after. But we have that showing up. If I come in and look in group two, you can see that these are grayed out and this is one thing I like about Firefox. They're grayed out because these are displayed none. If I come on here, display none. And that's because right now, we have group three is targeted. So this is targeted. If I come up, does it show it? I thought I saw a target somewhere. Yeah, here, media group target so that this one, this media group is targeted. Let's dock this to the bottom, dock to the bottom. So now what will happen is, if I click on one of them, let's scroll down, if I click on this, now the group two is the one that's targeted. So it switched, we're not getting any help here when I do that. Actually, maybe if we did it this way around. So let's go into this is group one or group two, yeah. So in my group two here, let's go back to this one, you can see it's grayed out. And then when it gets targeted, it gets display on it. And then when I go to the next one, it loses the target. So it's now a display none again. So we're only showing the arrows for whichever one is the current target. And that's perfect. It's all working, but I have a big, big problem. And that is, if we're on our page and there's no target, then we have nothing that we can go on. So what we could do is say, because here what we did is we did our display none. We need the first one to actually be display though. So if I say media group first child, so we're selecting the first media group, and then we could say the where next comma dot previous can be a display block. So it's not going to do it for the first one. And that means the first one now has this. We can go that way, but it's always going to be there. So even if I'm a group four, this is still here. And if I click it when I'm on group four, it's going to bring me all the way back to group two because that button is always there. And that's a problem. You'll see solutions with these types of scrolling type things using radio buttons. And that's because it's a little bit easier to control or check boxes, probably radio buttons. Because as soon as you click one radio button and deselects the other one and you can have the first one selected, maybe that would have been a better solution here, but I didn't do it that way. So we're going to figure it out though. We're going to figure it out. I think, I hope, but I don't know what to do yet. So I want to fix the spacing and stuff here. So let's just, I'm going to do dot media group. I'm going to put the border on there again, border, one pixel solid, I'll just blue for now. So the media groups are okay. Media, scroller, border, one pixel solid red. Why does my media container, border, one pixel solid yellow? Why is that not even showing up? Oh, okay, but why, oh, okay. So I did a top on these, but I didn't put a bottom. And I guess I should have put a bottom. And just to show you, actually, let's just put background red important just to make sure that it works. Of course that's not, oh, it's my previous I did that. There we go. So you can see it's sticking out the bottom. It was really subtle, but I could see it doing it when I was hovering. I could see like a darker a little bit. So to fix that, I think if we just do a bottom of zero, it fixes that, but the SVG doesn't look centered. So we'll do that for now, bottom zero. Can we just do a display none? So here I'm just gonna do an align items center. And here instead of a display block, we'll do a display flex. I'm guessing that worked. Let's put that back to block. So I'm gonna hover, save, they moved down. So yeah, I guess that's working. Whoops. Oh, look, you can see they're not, I'm getting two, you can see my double buttons there actually. Because that other one that still hasn't gone off doesn't have the display flex. So we'll throw a flex here. Interesting display flex, its outer value is still display block. So it's gonna behave exactly the same way. Display flex only changes the inner value to display flex. Okay, they look a little bit off center, but we'll live with that. Before it looked too low, now it looks too high. I don't know. Okay, so that's fixed at least to turn off all those. The next thing I wanna do is I wanna be able to make sure, like in the Netflix one, we can see that there's more coming. I think if I go to my media scroller, say I do padding of two rim. And now my arrows are, yeah, okay. So maybe one would be better. Oh man, what did I set my width to three? Is that working? Apparently. Because what I want is now every, oh, because of this, one second. Yeah, so if I do padding one, one and a width, but it should, yeah, that's fine. That should be three. So here, I'll talk my way through this in a second. Padding, padding, padding, padding. First that should be like zero top and bottom, right? Zero top and bottom, and then three, but that's way too big. How is that three RAM here? And then that's happening here. That's refresh the page. 1.5, I'm so confused by these numbers and why they're not, we're getting one, two, three, four, five, and then we have this one. Is it because it's split? I'm so confused, but whatever. We'll figure it out. Perfect, because you can see it's not lining up the way I'd want it to. Oh, maybe that's the issue too, is the way it's lining up. That's the padding on the media scroller. One second, what if we did a scroll padding inline? So inline's gonna be left and right of the same thing, 0.75 RAM. Okay, and then we just do like a full refresh. There, okay, so yeah, I was wondering why we weren't getting the space here. The scroll margin inline should help. If I take this off, it's still there. Okay, hmm, okay, whatever. We're gonna fix things in a second. Let's stick with this, two RAM. If I click there, see how it doesn't like line things up properly? And this, I think, should help everything line up. Let's start that over again. So here we have that space. Oh no, no, Kevin, padding, not margin. Okay, let's make that two. Two, two, oh, why? Okay, I don't, anyway. There we go, that's more what I want. Cool. So now it's giving us that padding on the two sides. I was using margin by one and padding. So we're getting like two RAM of padding here, two RAM of padding there. And actually, I guess if we make that three in three, it should line up more with how I had my buttons originally set up. So we get the three there, and then yeah, okay. So this three is helping everything line up with the three that I had on the button. And so that covers exactly where that other one was. And so then we click that, and then now my buttons always line up on top of the other ones similar to what Netflix is doing here, right? So the button always lines up with the one that's there. Cool. So that's done. And it works. Cool, cool, cool. Okay, I'm pretty happy with that. And we have this problem with the button that goes nowhere, but. Let's bring in those indicators and then we're gonna try and solve that last problem. So for the indicators, we're gonna come all the way down. I need to be media group previous. I'm just trying to think. We have my media scroller. Do we need to be inside my media scroller? I do believe we do. So if we need to be inside my media scroller, we wanna be here. I'm gonna do navigation indicator, indicators. And then in here, this is really visual only. So like I'm not, we're just gonna div times four because we have four groups that we're going through. We'll just do it like that. Nice and simple. And so here, let's do that. We'll do my navigation, indicators. So let's just make them appear first. So position navigation indicators first. And we need navigation indicators star. Just select everything inside of it. These will get a width of, let's go look at Netflix. They show up the width is maybe one RAM. The height on them is probably three pixels. And a background, we'll start with white and we'll have to change that. But we'll throw white on there for now. Or actually we can probably keep that. They should be somewhere on my page. Oh, so here on this, let's do a position. Position, absolute. So they're there. They're showing up here now. I wanna do top. Oh, top, I was gonna do top zero but let's do top negative two RAM. There where trending now is. And then we'll do a right of zero. And they're all the way there. Let's do a two RAM. Cool, so they're all there which is roughly where I want them to be. But now we'll throw a display flex on them. So they go next to one another. Gap of two pixels. I think the height's actually too big. We'll do a height of two pixels. I'll make this three just for, space them out a little bit more, because why not? And what we'll do is we'll get it working and then we'll get it to only show up where we, when we want it to. So here we can actually say this is an opacity of zero. No, opacity, let's just do point five. We're gonna make it really stand out at the beginning. Okay, now is where the weird selectors. And this is where SAS really would have shined because I could have used a for loop to create this. We're gonna do, no, media group, media group and then navigation indicator. No, indicators. I should have given them a class, whatever. It creates a longer selector, color background. Just, this should actually change all their backgrounds to red. There we go. So actually we'll turn off this opacity. So they're all red. Now what I actually wanna do is media group and, oh man, I just realized a problem. Maybe it's not a problem actually. We'll see. And child of two, target. So if the second media group is targeted, they should change to red and then turn back off. Cool. And then this is where SAS really would have been nice. If I take the same thing, and it's child, target two, and then I put that on this and take off the target. When we go on the second item, it will be red. So when the second child is a target, any sibling, like you can see the plus one used a lot. Plus means whatever follows directly after. Whereas this is, the tilde is any navigation indicators. As long as it's a sibling, it doesn't have to be a direct sibling. The plus is a direct sibling. The tilde is from here on out until the end of the parent, select anything. So we're selecting, we're grabbing our navigation indicators and then we're grabbing the second div that's inside of there and changing the background color. So a SAS loop would make this a little bit easier, but we can do this as a one, two, three, four. And then just here becomes, whoops, one, two, or one, two, three, four, and then the same thing. Should I just turn off word wrap here for a sec? One, three, and four. So now it follows. Cool, right? So that would just become, here we can just do our opacity of 0.5 and then for all of these, we'll just select the whole line, opacity becomes one. And now, cool. Now we've run into the problem though again is if there's nothing that's being targeted, that doesn't highlight the first one, which it shouldn't, but we'll fix the, this is gonna be an opacity of zero. And then we need that same hover thing that we had here. I'm just gonna do it here, media, scroller, hover, media. I don't know, I called it navigation indicators, gets an opacity of one. So we don't see it. Oh, whoops, this is on the wrong thing. Opacity of zero. So it's gone, but then when we hover, it shows up. I'm also gonna move this down a little bit. So it's a little tighter, just so it's a little bit. I think it's, there we go, my sizing. They're not the exact same thing, but it's the same idea. There's no indicators on until I hover. And then obviously in my case, it switches immediately with Netflix, it does it after, we're not using an animation or anything. So this is with CSS only, I believe is the only way we can actually do it, which is, you know, I think it's good enough. Okay, so that's done. Now we want to fix the problem with that when nothing is selected and when this button is here. How can we do that? For this, I think what we could do. Oh wait, maybe, can we do this? Let's see. Could I say media group, media group not target? No. What I wanna say is, if nothing is targeted, the first one should be activated. If nothing is targeted, the first one should be activated. Only the first one. Only the first one, if nothing is targeted. So, okay, we're gonna try, if we do media group not, can we do not target the border, two pixels solid red. So you can actually see these two have a red border on them now, because they're not targeted, but as soon as they become targeted, it loses it, but it stays, so okay, we can target, we can select something that's not being targeted. So now, if nothing is targeted, they all would actually have it on. So media group, if nothing is targeted, but I can't say media group not target for looking at all of them, and then choose the media group, like the first one. I can't choose the first child once I've targeted all of them, and I need to look at the other ones to know if the first one should have it on or not, because if not, so say we did this. No, there's no way of saying, oh, unless we did media group, no, because again, I can't say media group second, third, fourth, not target. First one gets this styling. I'm gonna cheat a little bit. Yeah, I think we're gonna cheat a little bit. It's not cheating, it's part of CSS. We're staying CSS only. But I'm gonna open Chrome Canary. In Chrome Canary, I'll put a link to it in the description, there's this little guy here, and I would just have the, me do do do, oh, it's not there. I was hoping it would be in the experiments, but we can go to, let's Chrome flags, and experimental web platform features, just make sure it's enabled. And if it's enabled, you get the, if you're on Mac, you can use Safari, and that's, you don't need to do anything. It's in Safari, it's fully supported in Safari, and that's has, the has selector, because I think, I haven't done, I've read about it. Okay. Media scroller has, let's just see, has, what do we wanna see if it has? Has a link in it, or let's do has previous. Previous, yeah. We'll get a border of two pixels, solid, lime, green, lime. Oh, of course, it's all getting it. Let's try that with media, media group. Okay, it's working. So does my media group have a previous link inside of it? The first one does not. So the parent is not getting a border on it, but all the other ones are. So, okay, has is working, that's good. Now let's just double check, but I'm pretty sure. We're just in Firefox, right here, pretty sure. It's not working here, yeah. We're not gonna get it there. So the browser support on this solution is not 100%, but we're gonna do it with CSS only. This is why has is gonna be fantastic. Okay, media group has, so we want the media scroller. So media scroller has a target that is not the first child, does that work? So if this works, when I click, we should get a border around it. Ah, oh, it worked. And now it, ah, even if we get to the first one. Oh my goodness. Look at that becomes targeted, the border comes on. That's a weird little delay there, no border. Is it, it's so weird if I'm here, it's only when I hover off that the border comes on, but whatever, it means it's working. Ah, this is cool. Okay, so if the target is not the first child, we can do that. Now, does that help me in the situation? No, but we can just say not, not target. Does that work? No, not target. So nothing, but we have a target right now. What's wrong with this? It's giving me syntax errors, but I think we're okay. Has, not, my not is here, and then we're closing the has. I think we're okay. What if I just put star here? Okay, it likes that better. So let's say we have no target, let's see what happens, refresh. No target, we have the border. Oh no, not, I just want not, that's not working. No. Oh wait, wait, wait, wait, let's go back. So if the target is not the first child, okay, and this, let's turn word wrap off because it's kind of weird. We can actually select things here then. So then I can select my media element first child, I think. No. Okay, wait, let's turn this back on. See, that was working, right? Isn't it when we did this? Okay, yeah, okay, so that's working. So then if we say media, let's just say media group, media group, okay, so they all get it. Media group first child, target is not first child. I feel like we should be seeing a border there that's not happening. I'm in, okay, we are, I was like, did I go back to the wrong browser? So this media group, I should be able to do that though. First of type. Oh, it wasn't first child I wanted, it was first of type. Okay, so this is gonna let us solve this problem where this stays on. This is gonna be a hell of a selector. Media scroller has a target that is not the first child. That first child that we're talking about, the media group first of type, so I mean that could come here, that child where is the where, or we don't need the where because we only have a next button. Where.next is a display of none. Like even prettier is like, no, you can't have a selector that long. Okay, so now we're here, if I click here, it disappears. Yes, and then if we come back this way, it's perfect, oh my goodness, it worked. Okay, and then can we use that same type of thing? Okay, so it's, if, so let's make sure though. Yes, it's working, okay, so because this one's working. So if there's anything targeted inside the parent that is not the first child, we turn off this arrow, it gets a display none on it. Yeah, perfect, okay. So that means, because we had to have that on when nothing is targeted, so we turn it on all the time and then we turn it off as soon as something in here that is not the first child is targeted, because that means that was the problem before. Without this, when we come back to here, it would turn off this one because we'd have a target in our group, right? Let's go find that original thing we did. Where's that target that we had? Here, we did, like they have display none and then we're saying like, when, however, no, where was it? The target thing we did. Oh, here, there, we'd be turning it on when that media group was the target and that meant that, I don't remember what it meant, but I remember we were stuck with it not being there because we had to turn it off and on anyway. That solved that problem and I'm wondering if we can use that same thing. Now this isn't the wrong spot. Navigation indicate whatever. We can clean this up another time. I'm so excited by that. Navigation indicators, so we wanna do the same thing. If the target, this whole thing we wanna grab. Oh yeah, it's just this, these, okay, we'll move this out of the way then because that's not where that should live. That shouldn't, we'll bring that up here. Okay, then my navigation indicators. So we want this selector again. Navigation indicators, star and then we're sort of turning it on based on which one is the target. But then we can say that the first, so when there, no, but we don't want that. Can we just say not target when there's no target, not target, the first of media group, not media group, the navigation indicators, this guy. Okay, so we can just combine that here then. We could say it's the exact same style we want on it. So my brain can't wrap my mind around this. We need this whole thing, that, there, okay. So that means that if nothing, oh no, this is targeted, no target, okay, good. So if nothing is targeted inside the media scroller, my first navigation indicator is going to be turned on. And then as soon as there's a target in there, oh, except now it's still turned on. Why is it still turned on? When media scroller has no target is basically what we're saying there, opacity becomes zero. So why is it still on? Let's just come up to my media scroller and put a hover on and then choose this first guy. Media scroller has not target. It's not working as intended for that one for some reason. Navigation indicators and child one. Media scroller has not, how come that works here? Has target not first child? I don't want to say has target not first child. I want to say has, so let's just look at it again. Has target not first child. Oh, can I just do this? That's effectively the same thing we just had. But then navigation, so the first child's just on. Media scroller has media group target. Oh, oh wait, oh yeah, okay. Then, oh wait, let me just do something on do a little here. I might know why it didn't work. No, it was the right thing, okay. I thought I made a mistake in my selector. Navigation indicators and child one is opacity of point five. Is that gonna work? Okay, that works. There might be a better way to do that. But basically what we're saying is they all have an opacity of point five. And if anything in here, so if the media scroller has a media group that is targeted, the first one gets an opacity of point five, and then I'm just using the cascade here to overwrite that with this one. And saying, except if it is the first one who's targeted, then we get the opacity of one on there. And then it works. So that might not be perfect implementation. I'm still really not used to the has selector. I haven't done very much with it. Maybe there's a way of doing this without the has selector, but I can't think of what it is. If you do have a solution to that, please let me know down below. I really hope you enjoyed this video. If you like this type of thing where I build things without any prep and I sort of explain my way through it, then I have a playlist right here of other videos I've done just like this one. And with that, a really big thank you to Jan, Johnny, Stuart, Tim, and Doug for being my supporters of awesome over on Patreon. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.