Continuing on in the exploration of new and interesting things that can be done with CSS3, in this article, I’ll explore some of the new CSS selectors.
Pseudo-classes enable selection of specific parts of elements without the pain of adding span tags. CSS3 introduces several new and powerful pseudo-classes (and pseudo-elements, but I’ll talk about those another time).
I have bad news and good news. The bad news first: CSS—even CSS3—can be boring. And CSS selectors are probably one of the best examples of just how boring CSS can be. The good news is that the better you know and understand CSS selectors the easier and more productive your design work will be.
CSS3 Drop Caps
Web sites that follow a magazine layout have long been in the habit of using the :first-line and :first-letter pseudo-classes to add drop-caps and a uniquely styled first line, such as the following:
Suspendisse accumsan, nisi id cursus adipiscing, felis felis tristique orci, at pharetra ipsum tellus sit amet arcu. Pellentesque fringilla est. Vestibulum risus.
Sed dui tortor, cursus quis, elementum eleifend, fermentum in, felis. Integer pulvinar urna. Sed ultrices. Sed quam ligula, sodales quis, semper quis, dapibus aliquet, arcu.
Quisque nec dui. Sed eros nibh, suscipit ac, dignissim ut, iaculis consequat, magna. Cras vehicula dolor quis nisi.
As you can see, the downside of this technique is that it applies that unique styling to every paragraph, which frankly dilutes the uniqueness of the styling. The easy workaround is to add a unique class to the first paragraph
p.first-para:first-line {
font-weight: bold;
font-size: 1.2em;
font-variant: small-caps;
}
Of course, that technique has downsides of its own, particularly in that it doesn’t give you any automation benefit. What we want is a CSS rule that will automatically format the first letter and line of each article. Having to add a unique class is no more automatic than wrapping the first letter in span tags.
Fortunately, CSS3 solves that problem.
Using the div>p:first-of-type pseudo-class automatically selects only the first p element in the div.
div>.paramag2:first-of-type {
font-style: italic;
color: #4F173C;
}
div>.paramag2:first-of-type:first-line {
font-weight: bold;
font-size: 1.2em;
font-variant: small-caps;
}
div>.paramag2:first-of-type::first-letter {
font-size: 2.5em;
float : left;
color: #20307F;
}
From there we can add simple style declarations, plus we can uniquely style the first paragraph in the article.
Suspendisse accumsan, nisi id cursus adipiscing, felis felis tristique orci, at pharetra ipsum tellus sit amet arcu. Pellentesque fringilla est. Vestibulum risus.
Sed dui tortor, cursus quis, elementum eleifend, fermentum in, felis. Integer pulvinar urna. Sed ultrices. Sed quam ligula, sodales quis, semper quis, dapibus aliquet, arcu.
Quisque nec dui. Sed eros nibh, suscipit ac, dignissim ut, iaculis consequat, magna. Cras vehicula dolor quis nisi.
CSS3 Table Shading
Another common styling task that used to require a lot of hand-coding is a long table of data.
For tables with a lot of columns, the readability options devolved to just a few choices: use border lines to delineate rows; hand-code background colors for alternating rows (or alternating groups of rows); or use JavaScript to apply background colors for alternating rows.
The new CSS3 pseudo-class :nth-child was made for situations such as this.
Adding only the following line to the CSS automatically applies background-color shading to alternate rows:
tr:nth-child (odd) {background-color: #BFEAC0;}
For a slightly more elaborate view that hearkens back to the good old days of tractor-feed, dot-matrix printers, the following two lines automatically apply background-color shading to alternating groups of two rows:
tr:nth-child (4n-1) {background-color: #BFEAC0;}
tr:nth-child (4n) {background-color: #BFEAC0;}
I will freely admit that most of what I’ve shown here is not at all what you might call fun-filled excitement. But it’s predictable, it’s automatic, and the browser results are not unattractive.
Still to come are gradients, which are cool even without consistent browser support, and media queries, the gateway to an awesome mobile browsing experience.