• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 5. Improving Efficiency Using Pseudo-classes

5. Improving Efficiency Using Pseudo-classes

In the last chapter, you learned how to use attribute selectors to target individual links and images without having to add IDs or classes to your HTML. In this chapter, you’ll learn about more CSS3 selectors that can help you keep your code clean and lean, as well as avoid the need for JavaScript or Flash. We’ll use them to apply more visual enhancements to both the speech bubbles and article page, and then top it off with some CSS-controlled animation and transitions to enhance usability.

What You’ll Learn

We’ll create alternating styles for the speech bubbles and the photos in the article page, as well as create a table of contents that highlights the current section of the article, and we’ll do it using these pieces of CSS3:

  • The :nth-child() pseudo-class to select alternating elements

  • The :nth-of-type() pseudo-class to select alternating elements of a certain type

  • The :last-child pseudo-class to style the last element of a list differently

  • The :target pseudo-class to style the target of a URL containing a fragment identifier

  • Transitions to change the value of a property gradually instead of abruptly

  • Animations to control more complex visual changes


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint