How to make a CSS compound selector in Dreamweaver

Hi, my name is Dan. In this video we're going to look at Compound Selectors. Now we've looked at it a little earlier, Compound Selectors, we're going to cover it again. It's important in this case, because, at the moment these buttons here are using some styling that's kind of a Bootstrap, which is kind of light gray, which is the Link. And the Hover is dark gray, so I need to change it.

Now you might be asking why? Because we've dealt with links earlier on. Remember, down the bottom here, we went and changed all the Links to have this white, and we changed the Rollovers. Why haven't these come along for the ride? And the reason is, it's because Bootstrap has its own specific-- so if there was no styling come through from Bootstrap, it would be perfect with their white A-link, but because Bootstrap specifically said, it be a light gray, and then a dark rollover gray, it's taking control of that styling, so we're going to have to take it back again by overriding it.

So what we need to do is, we need to go through and create a Compound Selector. So let's do that. What I want to do is-- I'm going to click on here. There is an A-link here, and there's a List Item, and there's all this junk that goes in before it. So what I can do is, I can do a specific Compound Selector. So if I hit 'Selector', there's the Compound Selector, it's gone through and it's styling everything. Every link, that is the 'a', that is inside of the list, that is inside of a Class called Navbar, which is inside of a Class called Navbar-nav, which is inside of another class called Nav. So it says, "If these all are true, apply this style." Now this is a little messy. It's quite a lot of detail in here. What you could do is, you could tidy it up by just saying this.

If there is an active link that is inside of a List Item, that is inside this whole overriding Nav, this whole thing here, it's the .nav Class. That would work just as well. It's up to you, this looks cleaner, and tidier, and more impressive. And this bit here will work. But it's quite specific, and a little bit ugly. So, let's make it look pretty, by tidying it down.

This is still true, there is an active link, which is inside a List Item, which is inside of the Nav. The reason I don't-- I could tidy it down even closer. I could do just this link, that is inside the Nav. Problem is that there is, over here, there's a link. Remember, we added a link where it says, if I click my Logo, it's going to jump to Home page. I don't want that to be affected by this list. So I want to be a little bit specific. So, I add a link that is inside the List Item, which are these two guys here. So what we're going to do is—

What we also will do is, I want it to be slightly different. Remember, we can put in our-- you know what those are called That's right, our Pseudo Classes. Because I want to not just style the Link, I want to do the Link, and Hover. So, to do it, I'm going to go down to my Type now. I’m going to change the color of it, I'm going to switch it out to white. Hey presto, we've got our Links being white.

So, Compound Selectors can be a little confusing. We've done it a couple of times now. The other thing to know is that sometimes when you're working with Bootstrap, you need to go and find-- there'll be a bit of a css counter or overriding what you're trying to do with some of your baseline things, like we did with styling our basic links for the whole website.

All right, that's it for this video. We're now going to do our backup, so 'File', 'Save All'. And now we're going to go out to our 'Desktop', and I'm going to copy it. I’m going to go into 'Zold', and I'm going to put it in here. I'll rename it, call this one 'Backup'. And we're going to put the 'Following date'. It's not Following date, so I'm going to just give it the 'Year', the 'Month', and I'm going to put '04b'. Great, see you in the next video.