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.
In this movie, we are going to take a closer look at using our remaining structural pseudo class selectors. First, last, and only type structural selectors allow you to introspect the children of a parent element and then target child element based on their position, amount, and status within the parent element. So I have the 02_10.htm file opened. Now I just want to point out, a very simple page structure here. I am going to scroll down a little bit and we can see that we have three div tags. Inside those div tags, we have a mixture of heading 1s, paragraphs, and heading 2s.
If I preview this in a browser, you can see there's some very basic styling on it. What we are doing is, we are going to use those first, last, and only selectors to target specific elements and then just change their color to red so that we know that we are successfully targeting those elements. So I am going to close out of this and scroll up and I can find in the head of my document a section where I'm going to be writing some of these selectors. Now the way that we are going to do this is we are just going to write the selector and then comment it out and then write another one to follow behind it.
So you can do this or you can just change the selectors if you would like. It's really kind of whatever you want to do. That's fine by me. The first thing I want to do is I want to find out exactly what this first child selector does. So I am just going to do a universal selector and say hey, give me all of the first child elements on the page. So I am just going to go ahead and do an *:first child and what I am going to do there is just go ahead and create property inside that, that says color red.
Okay. Fair enough. So if I save this and again preview this in a browser, I get to see some very interesting things here. Everything that's considered to be a first child is now targeted, including the first div tag. So the first div tag is a first child of the body tag, this heading is the first child of this div tag, and this heading is the first child of the third div tag. So we can see that it is accurately targeting all of the first children, including those larger block level elements. Okay. I am going to copy this and comment it out.
The reason I am copying it is because it's just going to make it little bit easier for me with my next selector, because I am just going to change the selector itself. Now the next thing I am going to do is I am going to target all of the heading 1s when they are the first child. So I am going to change that universal selector to h1:first child. Again, I can save and test this and I can see indeed all of the heading 1s have been selected because they are all on the first child inside their respective div tag. What if I just wanted target the first paragraphs inside the div tags? Obviously, first-child isn't letting me do that.
So again, I'm going to copy this, comment it out, and then just sort of paste it. Again you can just modify the selector if you want. You don't necessarily have to comment them out the way I am doing. So again if I say p:first-child and save that and test it, no targeting going on whatsoever. The reason for that? Paragraphs are never the first child. So I am going to modify this. Instead of saying first-child, why don't I just say first-of-type and do it that way? So instead of saying first child, I am going to say p:first-of-type.
Now if I save that and preview that, again now the first paragraph inside each div tag is indeed being targeted, something that first child couldn't be for me. Cool! Now let's take a look at some of the last-child selectors. I am going to go ahead again, copy this, comment it out, and paste it. What if we said p:last-child? Let's save that. Well, now if I test this in a browser, I can see that only where the paragraph is the last child inside of the div tag is it targeted.
So only when a paragraph is going to be a last child would I be targeting it. Let's change that up a little bit. I am going to copy this, comment it out, paste it. And what if I say h2:last-of-type. So again, instead of just saying last- child, we are going to say last-of-type. So now if I save this and preview it, now each last heading 2 and a div tag, even if it's only one, will be selected. So you can see here it's targeted two of those, ignoring this one because it is not the last heading 2.
Finally, let's check our only child. So I am going to go ahead and copy this, comment it out, and paste it. Essentially here, I am just going to do paragraph only-child. I am going to save that and preview it, and you can see it doesn't target anything. Well, that's because there is never a parent element here that only has a paragraph in it and nothing else. But if I modify this to only-of-type and save and test that, now we can see that there is a div tag that has only one paragraph in it and that is successfully targeted.
First, last, and only structural selectors are extremely useful, especially for sites that contain a lot of dynamic contents. So if you have paragraphs and div sections and contents being dynamically generated, a lot of times these can really help you say that hey, the first heading inside this div tag, no matter what it is, gets this styling. Now if you decide to use these selectors, keep in mind that Internet Explorer has fairly weak support for them and if you are going to attach critical styling to them, you may have to provide an alternate or fallback means of applying those styles.
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.