The Power of CSS3 Pseudo Class Selectors

Though not fully supported in all browsers, CSS3 pseudo class selectors are really powerful and exciting. I’ve been using the basic CSS pseudo classes (e.g., a:hover) for ages, but I’ve only recently started using other pseudo classes, particularly the position/number-based ones.

One example is :nth-child(N) which allows you to style every other item in a list…

li {
color:blue;
}

li:nth-child(2n+1) {
color:red;
}

…or every third item…

li {
color:blue;
}

li:nth-child(3n) {
color:red;
}

…or just the fifth item…

li {
color:blue;
}

li:nth-child(5) {
color:red;
}

This tester from CSS-tricks.com demonstrates how it works. They also have this excellent explanation of nth-child and advanced pseudo classes in general.

1 thought on “The Power of CSS3 Pseudo Class Selectors

  1. best inversion table

    I just like the valuable information you supply in your articles.

    I will bookmark your weblog and take a look at once more here frequently.

    I’m relatively certain I’ll be informed a lot of
    new stuff proper right here! Good luck for the following!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s