CHAPTER 4
Styling Content and Interfaces
For far too long, we developers have hacked around CSS to get the effects we
need in our code. We’ve used JavaScript or server-side code to stripe table
rows or put focus and blur effects on our forms. We’ve had to litter our tags
with additional class attributes just so we could identify which of our fifty form
inputs we want to style.But no more! CSS3 has amazing selectors that make some of this work trivial.
A selector is a pattern that you use to help you find elements in the HTML
document so you can apply styles to those elements. We’ll use these new
selectors to style a table. Then we’ll take a look at how we can use some other
CSS3 features to improve our site’s print style sheets, and we’ll split content
into multiple columns.We’ll look at these CSS features in this chapter:
:nth-of-type [p:nth-of-type(2n+1){color:red;}]
Finds all n elements of a certain type. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]:first-child [p:first-child{color:blue;}]
Finds the first child element. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]:nth-child [p:nth-child(2n+1){color:red;}]
Finds a specific child element counting forward. [C2, F3.5, S3, IE9, O9.5,
iOS3, A2]:last-child [p:last-child{color:blue;}]
Finds the last child element. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]:nth-last-child [p:nth-last-child(2){color:red;}]
Finds a specific child element counting backward. [C2, F3.5, S3, IE9, O9.5,
iOS3, A2]Download from Wow! eBook <www.wowebook.com> report erratum • discuss