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.
One of the more intriguing additions to CSS3 is the target pseudo-class selector. Much like the existing hover and focus pseudo-class selectors, target allows you to react to user interaction. In the case of target, styling is applied if an element on the page is the target of a named anchor link. Essentially, if a link targets an ID within the existing page, the target pseudo-class selector is applied. So here is how it works. Let's say you have a long list of frequently asked questions. To make navigating the page a little easier for your users, you may include a menu at the top of the page that allows you to jump to the question you want to see.
To do that you will include a named anchor or some type of ID at the point that you want the user to jump to. You can then write a selector that will change the styling of the target element when the link is clicked. As long as the area is in a target state, the styling will persist. To understand how that's determined take a look at the URI. If the URI indicates a fragment identifier just like this, right here on the end, the target state is considered active. Now support is relatively widespread other than Internet Explorer.
However, earlier versions of Safari reported buggy implementation and as of yet, we only have a partial implementation in Opera. So you may want to be sure to provide some type of fallback styling or just use it for non-critical styling for the time being. I also recommend testing thoroughly as always to check for any unwanted behavioral issues. So you want to try this out? I do too. Let's go ahead get check it out. So here I have the faq.htm file open, kind of what's going on here. Notice that if I click on one of these FAQ links like California Calm for example, it jumps me right to that point which is awesome.
Now if I look up at the URI, I can see that the #calm has been added to the end of this to indicate the current target. If I return the top, it gives me the top identifier. So the target pseudo-class selector allows us to respond to that. So let's go ahead and do that by going in and modifying some of our styles. So I am going to switch over to my main. css file and at about line 494 we have a comment that lets us no where the target pseudo-class selector is going to go. So, we don't really want to target the actual target itself.
The div tags that surround all of the definition lists that contain all the information, they're the recipient of the target. We want to style the heading three that's inside of that, but that's okay, because we can use the descendant selectors to make that happen. So I am going to type in #mainContent #mainArticle div:target h3 and here's our pseudo-class, target. So dive:target h3. So now what we are doing is we are targeting any heading three, any div tag that is the current target of the page, and of course that's inside main article in main content.
Okay cool. Now let's go ahead and do the styling for this. It's fairly simple styling. We are just going to add a little background image to highlight it and change the color and make the font size a little larger. Let's go ahead and do padding-left and we will just do 45 pixels worth of padding there. I am going to increase the font size. So I am going to take that up to 180% and then for color, I am going to make that #cb7d20. There we go. Finally, for background we will do url(../_images/big_star.
It gives you some idea. We are just going to put a little star icon beside it. No repeat on that. We are going to do left center and that will do it. So let's go ahead and save that file and I am going to preview that in my browser again. So here I am, back in my browser and if I just scroll down through I can see that we don't see any styling on any of those headings. But if we go back up towards the top and we click on one of these, let's say From Desert to Sea, now we notice that the headline is a little larger. It has the star beside it and it gives us a little bit of feel for where we are.
We know that that is the object that we've targeted. We can still scroll, read all of the other FAQs. So this isn't hindering us from accessing the data. It's just making that a little bit nicer Again, if I remove that target by going back up the top, notice it's scrolling back down again and see From Desert to Sea? It's not there anymore. So only when I target an item does it receive that styling. So you don't want to take it too far, especially here in this case I want people to be able to read everything. In this particular instance it's just a way of letting people know you are here.
So obviously the target pseudo-class selector gives us a very powerful option for enhancing targeted element styling. Now I want to mention that I have seen a lot of experimental tutorials that used the target pseudo-class selector as a way of building interactive widgets ,like image galleries and tabbed panels, because when you click on something you could have expand or show it or hide it. So a lot of people are simulating those behaviors using this. Now these are very intriguing examples, but the behavior of those named anchors needs to be taken into account if you're going to use them like that.
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.