Join James Williamson for an in-depth discussion in this video Understanding complex selectors, part of Dreamweaver CS4 with CSS Essential Training.
- View Offline
It is doubtful that your pages will ever be simple enough to just rely on the three selectors we learned about in our last exercise, ID, element and class selectors. It's quite common for example to want to style the same element type differently depending upon the region it's contained within. Many people who are learning CSS for the first time will rely on class styles to achieve the needs of styling. This creates more code than necessary and styles that are just harder to maintain and update. A better solution is to use selectors that are just a little bit more complex.
So in this exercise we are going to learn to group selectors together to save time, we'll learn about descendant selectors that allow us to target specific instances of elements, and how to use pseudo-class selectors to make styles react to user interaction. So one of the first things I want to do , we've got a slide up here, I want to talk about these different what we call advanced selectors, although advanced is really just a word. The first thing I want to examine are the group selectors. Notice that we have h1, h2, address. Now, that's not three different selectors; this is one group of selectors.
So, what this allows you to do is if you have separate elements that are going to have exactly the same styling, you can simply group them together. So, instead of writing a selector for h1 , and then another one for h2, and then another one for address, we are just grouping them together. Notice that they are separated using the commas. That's a really a big point. You don't want to forget those commas or you are going to write what we call a descendant selector, and you can see that below it. Here we have a descendant selector that says #mainContent space and that space is very important, h1. Okay, so what does that mean? Well, unlike the group selectors which is basically taking multiple elements and styling them exactly the same way all at once, the descendant selector instead targets a specific selector and you are going to find yourself using this one probably more than any other.
So, in this particular instance this is targeting a heading 1 tag that's found within any element that has the ID of main content. So, that's what that space does. It basically says hey, any tag or any element like this, in this case the h1 tag, inside of this I want you to style. That's a very intelligent selector. That allows you to say hey, my paragraphs in the footer should look very different than my paragraphs in the sidebar. And you can do that using just one selector. So, that is really cool. Now the other thing that I want to point out is that you can have as many of these as you want sort of strung together.
So, I could have h1 #mainContent #wrapper. So, you could do it that way too. You can make them as specific or as general as you need to based upon how many elements need to be combined. Now, the last selector type I want to address in this exercise are pseudo-class selectors. Pseudo-class selectors are really cool, although their support varies from browser-to-browser. But when you use them in conjunction with links and that's probably how you guys may have seen them used before. They allow us to style different states of that link based upon user interaction.
So, these are just a couple of the pseudo-class selectors, these aren't all of them, but you can notice that we have link, visited, hover, and active, and of course that's describing the status of a current element as the user interacts with it. Link indicates any element that has an href attribute. Visited would be a visited link, hover would be any element or link that somebody is hovering over, and active would be one they are currently clicking on. You'll notice that there is no selector in front of them. Essentially using a pseudo-class selector is appending these to the end of your selector. So, it says if we are going to target a link for example, it would say a:link, or a:visited, or a:hover, and a: active, so that would work out fine.
If that seems a little confusing and you are brand new to CSS, don't worry. We are going to do it in this exercise and hopefully it will make a lot more sense then. So, let's jump back into Dreamweaver and let's use these. So, we are working with our Advanced Selectors file and we are kind of where we left off before. We have some individual selectors, we have mixing of element selectors, classes, IDs, but we are still not targeting anything really specifically. Now, one of the first things I notice that if we click on the h1 tag, and the h2 tag, is they are almost the same. The only thing that differs is the color.
Well, what if we decide that that green color is something we want to use for every single header? We also want to make sure we have those fonts. In that case we don't need multiple selectors. So, what I'm going to do is select the h2 selector. Highlight it in my CSS Styles panel and delete it. Now, initially that takes away the formatting from the h2 tag. So, what I'm going to do is I'm going to the select the h1 tag, I'll click it again and that allows me to rename this. I'm going to type in ,h2,h3. So that same formatting is going to apply to all of my h1, h2, and h3 tags now.
If I hit Return I can further modify this by coming in and changing the color to 060, and now notice that all of my headers including my h1s are now green. Cool! So that's one selector that's doing a lot of work for me now, wonderful! Let's talk about targeting more specific elements. Now, if I click inside, 'it was the name about something animals taking over the farm,' I can see that this passage of text is wrapped in a strong tag. Now, I could go ahead and define an element selector for the strong tag to format this text.
But what if I wanted my text to look different if the strong tag were inside a heading versus inside of a paragraph? Well, that's where a descendant selector can really help me out. So, I'm going to go ahead and select that element, just like I did. I clicked inside of it and then used the tag selector to choose the strong tag. Then I'm going to go over and choose New CSS Rule. Because of the fact that I had that selected, one of the things Dreamweaver does is say, "oh, you must want a compound selector," and then it gives me what it thinks I need in the compound selector. Now, I could be less specific or I could be more specific based on the content.
I'm going to click Less Specific and you'll notice that it says p strong. It even gives you a description of what's going to happen there. This selector name will apply a rule to all strong elements that are within any paragraph elements. Perfect! So I'm going to say this document only. So, I'm going to go ahead and click OK. I'm going to change my font-weight to normal, because by default strong tags bold their text, and then I'm going to go ahead and give it a background, of #FF0, and if I hit Tab, I could see it's kind of a bright yellow so it's going to be the equivalent of sort of highlighting this with a highlighter.
So what I'm going to do is I'm going to click on the Background category and I'm going to give it a background color, which is going to make it look like this text has been highlighted. And then I'm going to type in #FF0. Now if you hit Tab, you can see it's yellow, and if I click OK, now that text looks like is being highlighted by a highlighter and I don't see that happen anywhere else in my file. But if I were to scroll down and I want to emphasize this 'long time ago,' I could highlight and using the Properties Inspector, making sure I was on the HTML and not the CSS tab, I can click the Bold icon.
Again you can see it goes ahead and applies that. Now, that's now a class application that's looking at the structure to target that. Let's do a couple more of these descendant selectors so that we get a really thorough overview. We have two lists. One is an unordered list, and notice that's a UL tag. The other one is an ordered list, and that's an OL tag. Well, we can use that to our advantage because inside of them each one of them has a List Item tag. If we write just a generic list item selector, then the formatting would apply to both lists. What if I only wanted to target list items inside of my numbered list? Well, that's where the OL tag can come into play.
So again I'm going to choose New CSS Rule and I'm going to do a compound selector and you can't always trust Dreamweaver to populate this with exactly what you need. So sometimes it helps to really know what you want. I'm going to type-in OL, then a space and then LI. So, that's targeting any List Item element inside of an ordered list. So I'm going to go ahead and click OK, I now change my font-style to Italic. When I click OK, I notice that the one list changes but the other does not that has everything to do with the descendant selector that we wrote. Now, I'm going to scroll back up to find our content and I'm going to target this heading to look a little different than the heading above it.
Remember, these are both h1 tags, but I'd like the content heading to look a little different than my main heading. Maybe to note a series of importance or to focus the user's eye on a specific passage. So, I'm going to choose New CSS Rule, and this is indeed going to be a compound selector. Now, sometimes it doesn't get it right , sometimes it gets it exactly right, and by clicking inside that heading and choosing compound selector, it goes ahead and populates that with #content h. If it didn't get that, feel free to type it in. Remember #content h1, this document only.
Let me go ahead and click OK, and for font-size I'm going to take that to 1.6em. Notice that I don't have to grab pull- down menu. I can just go ahead and type an em right beside it. When I hit Tab, it moves it over for me, which is really nice. Our color is going to be white , so I'm going to type in #fff. I'm going to go to my Background category to give it a background color of #996, and then finally I'm going to go to my Box category and give it the same padding all the way around it and give it a padding of 5 pixels.
So, I'm going to go ahead and click OK , and you can see these two headlines, even though they are exactly the same structural element are now very different based on context, based on where they are. And the last thing we want to do is just do a couple of pseudo selectors, and we have a link right here which says George Orwell and that is appearing exactly has link text normally appears, underlined and blue. We are going to change that and we are even going to target specific states based on user interaction. So, I'm going to click the New CSS Rule and this time I'm going to use a compound selector, but I'm going to use my pseudo-class selectors.
And these are actually available to you in a pull-down menu. If you don't feel like typing them in, so you can grab the pull-down menu and choose a link for example. So, I'm going to do that. Click OK. I'm going to set my Text-decoration to none. It's going to remove the underline from it, and then I'm going to move the font-weight to Bold, and give it a Color of #600, which is a nice burgundy color. And when I click OK, I can see what happens. All my links are now no longer underlined, they are bold and they are sort of that burgundy color. Now, keep in mind that if you are going to remove the Text-decoration underline from your links, you need to give really clear styling information that there is something different about this.
One of the things that you can do to really help yourself is to create a hover for that as well. That means if anybody hovers over it, it will change its style and formatting and it will appear like a rollover. So, I'm going to go ahead and choose a New CSS Rule. Once again I'm going to do a compound selector and I'm going to grab the pulldown menu and choose the a:hover. Perfect! Now I'm going to go ahead and click OK , and in this case I'm just going to give it a bottom border. So I'm going to go to Border, de-select Same for all, I'm going to use a solid 1 pixel border on the bottom, and then I'm going to make the Color to #600.
So it is actually going to be the same color as the text. So I'm going to go ahead and click OK. I'm going to save the file and just to check to make sure that's working. I'm going to preview this on my browser. Notice now when I hover over any link, the outline shows up again. So it's giving sort of that rollover effect and that's using our pseudo-class selectors. So, the selectors that we've covered in the past couple of movies are far from all of the selector types available to you. They are attribute selectors, first child selectors, and even other pseudo selectors that you can use to target specific page elements.
Some of the more exotic selectors aren't supported very well in older browsers or even most versions of Internet Explorer. So, use them with care and learn which browser supports selectors you want to use. These core selectors, element, class, ID , descendant, pseudo-selectors, and the time-saving techniques that we've learned such as grouping selectors together will usually serve as all you need to build complex and efficient CSS styles for your pages. Now, that we have an understanding of the selectors that are going to be used to construct our styles, we need to understand the rules that browsers use when determining how they rendered.
So next up, we'll explore the concept that gives CSS its name, the cascade.
- Understanding XHTML and CSS fundamentals
- Understanding and implementing advances in typography
- Using the Code Navigator for faster CSS edits
- Styling form elements while maintaining accessibility
- Customizing the look and functionality of Spry widgets through CSS
- Controlling layout and positioning through styles
- Controlling CSS with the Properties Inspector