Last-Child Selector

[00:00:00]
>> Speaker 1: What else have we got left to do here with our fine calculator?
>> Speaker 2: Orange.
>> Speaker 1: All right niches. So, we have one thing left to go what is it?
>> Speaker 2: An orange background for the last column.
>> Speaker 1: We need some kind of orange background for that last column, okay?

[00:00:18]
How might you suggest going about doing that inertia.
>> Speaker 2: I might create a class and just put that class after calc button.
>> Speaker 1: Uh-huh.
>> Speaker 2: And then in CSS put an orange background for that class.
>> Speaker 1: Fabulous, anyone disagree with that approach? That's totally awesome, well done. So yes, absolutely we could go about doing it that way.

[00:00:47]
So, what we would do here in our code, we would just go on ahead and create a class here called, whatever. You could call it something like function button. And, we're gonna make it an orange background. And then, we would apply that class to all of these buttons in our HTML, you'd add that as an extra class, and that would totally work.

[00:01:08]
But because I feel like showing off, and because you had so much fun with crazy selectors yesterday, I'm gonna show you another trick. Okay, so what's in common with all of these buttons?
>> Speaker 3: They're in a column together?
>> Speaker 1: They are in a column together, which means that they are, what, in the row?

[00:01:31]
>> Speaker 1: They are the last item in all of these rows. We actually have a selector for that. How cool is that? Okay. So, the other way to do this, the class way is absolutely legit, but another way that we could do this is we could simply say, we could continue to work with calc button and then use the pseudo class called last child.

[00:01:57]
>> Speaker 1: I know right? It's the last child, the one that lives in the basement we don't talk about. Okay, for the last child here, we can do it this way. And we can give it a background color, of df974c, that's our fabulous orange, and a color of white

[00:02:25]
>> Speaker 1: Okay, so this is the pseudo class called last child, guess what there's also one called first child. Okay, there's no middle child, there only last child and first child. Then we have one called nth child for any of the others. But last child, we'll go ahead and select the last button in the row.

[00:02:45]
And so, if you go on ahead and refresh your page, it should look like a calculator now [SOUND] maybe we should set up a hover state for those. So we can do that pretty easily. What would my selector look like for setting up a hover state for those buttons?

[00:03:04]
>> Speaker 4: Dot calc button.
>> Speaker 1: Dot calc button.
>> Speaker 4: Colon last child.
>> Speaker 1: Colon last child.
>> Speaker 4: Colon hover?
>> Speaker 1: Colon hover, yep, you can just line up those pseudo classes one right after the other, just like that. So dot calc button, dot last child, dot hover and the background color for this is a dfb07e, okay.

[00:03:42]
>> Speaker 1: And, I think he had an active state in here as well. That's pretty good. I'm just gonna leave it right there. So, there we go. If you refresh your page, you should have some nice hover states on your buttons. And, it all lays out nicely. The only last thing you need to do is what?

[00:04:08]
Take out the unsightly red wrapper,
>> Speaker 1: And, now you have a beautiful calculator. How cool is that? Are you excited. You ready to code this thing?
>> Speaker 4: Yeah.
>> Speaker 5: Yeah.
>> Speaker 1: So now, these buttons, these buttons, you'll actually be able to click, you'll be able to see the numbers coming up here you'll actually be able to do math with it.