Why I Love CSS Selectors

I’ve been referring to Chris Coyiers’ blog css-tricks.com like it’s going out of style lately. It’s a really great source for doing some awesome stuff with CSS and Javascript. But when it comes to handling presentation (or how the site “looks”) I really try to avoid JS as much as possible. The great part is that CSS3 has been gaining more and more acceptance across all browsers over the last years and now gives designers really great flexibility in doing stuff that formerly only JS could do.

Here’s two things I just did for some sites that are awesome.

Combining Attribute Selectors AND Nth Pseudo class

Let’s say you have a bunch of articles and each has a link at the top to a PDF. This is true for a whole swath of your articles, and the previous developer or volunteer didn’t know that they should give them all a consistent class like “article-pdf” (oh the lessons we learn!). Well, you can still give that link a special and unique style using attribute selectors.

First thing is to target your link to the PDF with an attribute selector. I won’t go step-by-step, because Chris does it perfectly here. Basically, you want this:

a[href*=".pdf"]

That simple rule allows you to target any anchor tag — the “a” — whose href value includes “pdf”. That’s a good start, but it targets ALL the links that have “.pdf” in them and you only want the first one of your posts.

So, next you need to combine that rule with an “Nth Pseudo Class”. These are great, they basically let you target the 1st, 2nd, 3rd, (or “nth”) occurance of a certain child element. This happens most often in menu’s for example. You have a “ul” with 5 “li”s in it. You want to target the very first one and none that follow. So you’ll want to do this:

ul li:first-of-type {/*your fancy styles here*/}

So, continuing my example above, I want to target the very first link to a pdf in an article. And just to be thorough, let’s say I don’t want this to happen in a sidebar, or footer, just in my articles. Often, WordPress sites use “.entry-content” to contain where the actual content of  a post is. In that case, here’s the whole class to target ONLY the first link to a pdf in an article:

.entry-content a[href*=".pdf"]:first-of-type {/*your fancy styles here*/}

Viola!

Targeting Content After the Last Item

Here’s another great tool for menu’s. Sometimes, you really want a horizontal menu with separator’s, right? It’s pretty easy to automate having a pipe separator with the “:after” pseudo-class like this:

ul li a:after {content: ' | ';}

The problem though, is that it will add these pipes to every item, including the very last one, which will make your menu look like this:

Instead, we want to target the last occurance of the menu, and use the “:after” pseudo class to give it NO content. That’s where you need the “nth-last-of-type pseudo class”. Again, Chris Coyier kills it with this article. But the bottom line is, this is what you need:

ul li:nth-last-of-type(1) a:after {content: '';}

Now your menu looks awesome, like this:

What are some of your favorite CSS tricks? Chris can’t have ALL the fun!