Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Before we move on to our next chapter I want to take a more pragmatic approach to using structural selectors. In this movie, we're going to take an existing page that is styled with CSS 2.1 selectors, and explore how using CSS3 structural selectors can help us make the page's code a bit more efficient. Now what I've got opened here is the tour_detail_bigsur_trails.htm from the 02_11 folder, and I'm just previewing this in one of my browsers. Now, this is a fully styled page and this is something that's been styled more or less the way I want it to look.
But instead of using pseudo-class selectors and structural selectors, a lot of the style that we're going to be focusing on is actually a style using classes, which can make your code a little bit more inefficient. Take this table for example. This alternate row styling was done by the use of applying a class. Also, each one of these subheadings has a border above it which creates the separator. California Calm doesn't have a border above it simply because I've written a class that takes it off of that. It'd be really nice if I could write some selectors that were a little less reliant on those classes, that really don't mean anything and they're not descriptive. They're just there for styling purposes.
So I want to make my code a little bit more semantic. The other thing is I've got these trail ratings, Easy, Moderate, Medium, Hard, Difficult. I'd really like to add a little flair to those maybe by color-coding them from say like a green to a red. Again, I could do that by going ahead and writing classes that target those, but our pseudo-class, structural selectors particularly and child selectors here, could really help us. So I'm going to switch back to my code editor, and here I have the same document opened. tour_detail_bigsur_trails.htm.
Again, this can be found in the 02_ 11 folder and I also want to focus on the CSS file, but before we do that, I need to go through and get rid of some of these elements. So I'm going to scroll down until I find my table. In my table, I'm going to find each of these tr tags that have a class attribute. Now, a faster way to get rid of these would simply be to do a Find and Replace. So if your code editor has a really fast Find and Replace and you want to use that, I recommend using that as well. It's certainly the way that I would have approached this rather than trying to do it manually.
But for what we're doing here, this works. So I'm just going to go ahead and strip out all those class attributes on the table row. Be very careful. Make sure you're not removing any of the single brackets or anything that you really need. So that's good. Now, I'm going to keep scrolling down until I find my sidebars and again I'm looking for this h2 right here on line 146. There is that California Calm h2 and you can see its class says top. So I'm going to get rid of that as well. Now, I'm going to save this and if I were to preview this again in my browser, I see a few things happening now.
We don't have any alternate row styling anymore and there is that headline that I was referring to. So we need to go back in and modify our selectors so that, that styling is being applied, just without the use of those classes. So I'm going to switch over to the main. css file and on about line 674, I can find that mainContent table.data. So any table with the class data applied to it, tr.alt. So I want to go ahead and change that. The best thing for me to use here would be an nth-child selector because it will allow me to target those alternating rows.
So I'm going to change that to tr:nth-child. I have to count for the heading that's up there as far as the heading row. So I have to account for that. So I'm going to type in 2n+2. That's going to give me an offset. It's going to start counting on the second row. The top row is part of the t head. So it's not going to be counted. So it will start on that second row. 2n+2. So I'm going to go ahead and save that, and then I'm going to take care of the sidebar while I'm at it. So now I'm going to scroll down to about line 924, and I found the #sidebar's #specials h2.top.
Again, I'm going to remove that and here we're going to use our first, only, or last type selectors. Here I'm going to say first-of-type because that is exactly what this is. The first heading 2 in that particular div tag does not need the border on top of it and because of the way I've structured that, it will always be the first one that doesn't need it. So this is a very safe selector to write in terms of that styling. So I'm going to go ahead and save that, preview the page again within the browser, and I can see that, that has been removed, and my table is back to alternating rows, cool! All of that without the need of those sort of non-semantic class attributes that I was using before.
Okay, so what about these guys? What about each one of those? Well, we have a few things working in our favor here. This is an unordered list. So each of those is a list item tag, and they've all been surrounded by a strong tag. Now, there are no classes applied there. But the fact that they are in a repeating structure such as that unordered list, and the fact that the strong tag exists gives us two really good styling hooks to use especially for using things like nth-child selectors. So I am going to go back into my CSS, and I'm going to scroll up to about line 628 or so, and I've got a little blank spot there where I'm going to add these selectors.
So let's target the first one. I'm going to type in #mainArticle ul li. So it's targeting any list item inside of an unordered list which is inside of mainArticle. Then what I'm going to do is I am going to be even more specific with that. I'm going to say nth-child and I'm going to pass a value of 1. Now, that's going to target the very first list item in this list. So you can pass those explicit values. That's fine! Now, I'm going to follow that with a strong and this is one of the reasons I can sort of get away with being so general about this particular list.
Very rarely will I use a strong tag inside of the list. So in this case, I am being really, really specific about what type of structure I need here. So whenever it finds a strong tag inside of an unordered list's first list item, it's going to style it this way. Essentially, I am just going to apply a color to this and the color that I'm going to use is going to be #060. All right, cool! Now, all the selectors are going to be very similar to this. So, I'm simply going to copy and paste and I'm going to change that to the second one.
So we can just kind of go right down through the list here. grab the first one, now grab the second one, and the color on the second one is going to be 990. I'm going to paste that again and this time instead of the second one, of course it's going to be the third one. And the third one is going to get #cb9a00. Let's go ahead and target our fourth one, and here this one is going to target the F90. Now, this is going to work because obviously we know the structure of this.
This is now being dynamically generated. We know how many of these we have. We know exactly what we want. But you'll notice that this is allowing us to avoid having to write classes to do just styling. So again, it's sort of keeping our HTML code a little bit cleaner. So again the fifth one, this one is going to be 900. So now let's go ahead and save that. Preview it. Now, all of our trail rankings have been color-coded as well for us, which is really cool. So this is really cool. Class-free styling.
So it gives us that visual richness that we're looking for without having to rely on so many of those non- semantic classes added to our code. Now keep in mind, in this example, we're converting a page that's already been completed and styled, so the design and the structure of the page really weren't created with these structural selectors in mind, and that's going to be the case if you're ever going back and doing some of your older pages. Now, you can achieve even more efficiency when starting out by focusing on how structural selectors can help you achieve your goals without unnecessary markups.
So the next time you're creating an HTML page, you can sort of sit there and think about, okay, how can I structure this, or how can structural selectors help me target these elements without using a lot of these IDs and classes that I would normally use. Now, I know I sound like a broken record, but you do need to think about Internet Explorer support or in this case lack of support for certain structural selectors. In those cases, you may want to limit the usage of these selectors to simply providing enhanced styling techniques, rather than basing all the styling off of them, at least until Internet Explorer 9 adoption rates make supporting 8 and 7 less of a concern.
In the end, I'm sure you're going to find these new structural selectors in the CSS selectors level 3 module a welcome edition to your styling capabilities.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.