Challenge 2: Parental Selectors 2

[00:00:00]
>> Mike North: We have a second exercise waiting for us. [LAUGH] So we talked about container left with a left align nav, and then adding this right-nav class to the container. So what we wanna do is make use of the parent selector. So that we can actually get this result, right?

[00:00:20]
So we talked about it as an abstract example. We never looked at the CSS that would actually do it. But what you should have when we start this example, and I'll give you your instructions back in a second. I'm just gonna show you the code that you start with.

[00:00:33]
So I'm going to kill my server right now cuz it was running the nesting exercise so we're going to stop it with Ctrl+C. And now we can run the next exercise and its name is parent, for the parent selector. So what we have here, if we open up the parent folder and look at the Sass.

[00:00:57]
You already have the code for what makes this work in a left aligned way. So I want us to make it so that when we add the right-nav case, like when we add the right-nav class to the container, you will have to go in here. So right now it already has the class and as you can see it's not doing anything, right?

[00:01:22]
Our sidebar is still to the left. So the class is applied, it's not doing what it's supposed to be doing yet. So right Sass, that makes this work the way it's supposed to work, right? And the desired result, going back to the slide here, is that when we have the right-nav class added to the container our side bar should go to the right.

[00:01:46]
And at the same time you should have all of the same padding, all of the same alignment that you do when we have it in the conventional case on the left. So you're gonna have to deal with the borders switching sides and you're gonna have to figure out which margins need to be defined where.

[00:02:04]
This is a good exercise in terms of defining what some constructive cascading rules, where you override certain things strategically as little as you can get away with in order to get this desired result