So here are a few things I’ve recently learned or read about that might be useful to you.

Functions With Optional Arguments

Have you ever done the following, or something like it:

alert("hello world!");

Wow, that’s complex stuff, huh? Well, as you probably know, the alert() function is built into the language. You generally pass a single argument into the alert() function, and the browser will throw a pop-up message to the user displaying the message passed in.

But what happens if you do this:

alert("hello world!", "How you doin'?");

You might assume one of two things should happen: (1) Two consecutive alerts showing the same message, or (2) an error with no alert. But the answer is neither. Instead, the result is exactly the same as the first example that has only one argument.

The reason for this is that, in JavaScript, function calls can accept an unlimited number of arguments — even if the defined function itself only processes one or two (as in the case of alert()).

So what does this mean? Well, this has its pros and cons. If someone mistakenly adds an extra argument to a function call that will only deal with a certain number of arguments, they could be left scratching their heads over why the argument isn’t being processed, since no error informs them of the problem.

On the plus side, this allows you to write functions that accept optional arguments, and then write code to deal with this accordingly. This happens all the time in jQuery, and it’s something that can make your functions more flexible.

Redefining Native Objects

While we’re on the topic of alert(), here’s another thing it might be useful to know. Try this:

function alert(myvalue) {
    document.write(myvalue);
}

alert('hello world');​​​​

To save you the trouble, here it is in a fiddle.

In this example, we’ve redefined the alert() function so that instead of the message being displayed in a customary alert dialog, the alert() function writes the message onto the page. In the past, this also meant you could redefine other values, like the undefined property.

Try the following example in an older browser like IE8:

var undefined = 'hahaha';
var myvar;

if (myvar === undefined) {
    alert('it is undefined');
} else {
    alert('it is defined');
}

Although the myvar variable has not yet been defined, when we check to see if it’s equal to “undefined”, the if-else statement resolves to tell us that “it is defined”. This is because of what we did on the first line of that code block: We redefined “undefined”.

Comparing Strings Like Numbers

You probably have done numeric comparisons before using greater-than or less-than operators (“>” and “<”). And if you’ve wanted to compare two strings, you’ll just check to see if they’re equal. But you can also do this:

if ('baseball' > 'football') {
    alert('baseball rules!');
}​​​​​​​​​ else {
    alert('football rules!');
}​

Notice that I’m checking to see if the string “baseball” is greater than the string “football”. Unfortunately, JavaScript doesn’t know anything about sports. Baseball is obviously much greater than football. But in this case, the result will be an alert message of “football rules!”. Try it.

So how does the browser calculate which string is greater? Well, it simply assigns a number value to each letter and then checks to see which number result is greater. To make the baseball/football comparison return a positive alert for us baseball fans, all we have to do is convert the first character in the string “football” to uppercase, like this:

if ('baseball' > 'Football') {
    alert('baseball rules!');
} else {
    alert('football rules!');
}

Uppercase letters are viewed as lower in value than lowercase letters, so now the if-else statement will return the correct result — that baseball is in fact greater than football.

Again, this is not necessarily something that you’ll be using any time soon. It’s not often you have to compare strings in this way. But it’s good to know that it is possible should the need for such a computation ever arise.

More Like This?

What do you think of these types of posts? I normally don’t cover JavaScript as much as I do CSS. But I would like to publish stuff I pick up here and there, if for no other reason than to have a reference of my own to use. Your thoughts are welcome — especially if anything I’ve said here is incorrect.

Related posts:

1. Callback Functions in JavaScript
2. Triggering CSS3 Transitions With JavaScript
3. Coding for IE6 = Progressive Enhancement

Of course, we’re all going to slip up in this regard to some degree. I’ve answered people’s questions on this blog in ways that some people thought were rude and condescending. It wasn’t my intent to do that, so I’ve tried to do my best to apologize and keep the conversation going.

When Smashing Magazine added up/down voting for individual comments on their site, I expressed my displeasure over that decision. When they asked me why, I explained:

@smashingmag In theory, the vote up/down is perfect. But in practice, it is anything but, because it’s just another outlet for abuse.

— Louis Lazaris (@ImpressiveWebs) December 11, 2010

Proof of this “abuse” was demonstrated in a recent Smashing Magazine article where a harmless question was down-voted more than 30 times. Here’s a screen grab of the comment along with the down votes:

A couple of days before I took that screen shot, the number of downvotes were even higher, at around 35 or so. As you can see from the green “up” thumb, I up-voted the comment.

Are We Scaring Away Newcomers?

If we abuse simple questions in this way, then we’re basically closing the door to allowing new designers and developers to interact with those of us who are more experienced in this field. The good thing is, a few Smashing Magazine readers took exception to the way that comment was down-voted and pointed out how stupid it is to down-vote a simple question.

Maybe the person who posted that question is actually an experienced developer and he’s just always done things a certain way, and was curious as to why the author of the article chose a different method. I don’t think there’s anything wrong with that. But if the commenter is a newcomer to the field of web design, then it’s worse.

Now this person could be too embarrassed to ever post another comment again for fear of being down-voted into the Hall of Stupidity by a bunch of YouTube-trained egomaniacs. And who knows how many other newcomers will now be too scared to post a comment (especially not with their real name) on Smashing Magazine posts. I think that would be a sad outcome that could easily be resolved by never allowing individual comments to be voted on in a niche industry like ours.

But that doesn’t mean that you can’t reward commenters. As shown below, on CSS-Tricks, Chris Coyier gives a star to good comments — just like we got in Kindergarten when we drawed goodly pictures! :)

Thus I propose that blogs should do one of two things:

• No up/down voting on comments
• Have a moderator-driven rewards system

This keeps things positive, and will not scare away people who want to ask simple questions, or people who want to voice their support for Flash, or Microsoft — or other types of comments that are viewed as “stupid”.

Related posts:

1. Things You Might Not Know About Conditional Comments
2. Don’t Use Conditional Comments to Create Classes for IE7+
3. Dealing With Gray-area Comment Spam

Recently, Web Designer contacted me to do a feature piece covering CSS3 techniques. The focus of the piece is CSS effects that, prior to CSS3, required the use of images or scripts. The feature (called “Master CSS Effects”) was planned to have 30 CSS techniques, and I was responsible for covering 20 of them. I don’t know what the final count includes, as I haven’t yet seen the issue, but the magazines’s staff were responsible for any remaining tips. They also wrote the intro and conclusion.

The feature includes techniques for CSS Ribbons, tilt-shift text, CSS tooltips, anaglyphic text, and lots more, with some that are more run-of-the mill like multiple backgrounds and rounded corners.

This is officially my first foray into writing for a print magazine. It was fun and pretty much the same as writing stuff online, and I would definitely do it again. Check out the description of the article at the link below or by clicking the image above.

Web Designer 196 now on sale

Related posts:

1. The All-New CSS3 Click Chart
2. Screencast Series on HTML5 and CSS3
3. You’re Not Stuck in a Cookie Cutter Design!

I knew it had to be something centered around the ‘framework’ movement, mainly poking fun at the well-known HTML5 Boilerplate project. So on Tuesday night this week, I took the idea of HTML9 Responsive Boilerstrap JS from concept to creation. I finished it that night, including registering the domain, setting up the site, and gritclonemerging its own bogus repo.

It’s really not a hugely complex site — there’s not a single script on the page, just CSS. Some people found it interesting that someone would choose to spend ‘so much time’ on a nothing project like this. This is definitely not like me. I rarely have time for this kind of goofing off. But it was just 3 or 4 hours of work, plus a few adjustments afterwards.

The Crazy Stats

I wasn’t even sure when I would officially make the site public. I was thinking of doing it next week some time. But it was pretty much done, and it was early in the day on Wednesday, so I decided to tweet it at around 11:30am Eastern time. I thought maybe a few hundred of my followers would pick it up, have a laugh, and maybe share it with a few people.

But the result was astounding. Within just a few hours, Google Analytics for the site was showing over 30,000 page views. To give you a comparison, Impressive Webs usually gets around 10,000 page views, on a good day — and that’s a full day. As I write this article (shortly before midnight on Wednesday evening), H9RBS.js as had over 70,000 page views.

Why Did It Spread So Fast?

I didn’t do anything to promote this. Just a single measly tweet to my modest 6,000 followers. No blog post, no submission to Hacker News or Reddit or anything else. Normally when I tweet a link, if 100 people click the link, that’s considered a huge success (as far as Twitter CTR). But somehow, within 30 minutes this one had gone ballistic, and everybody was re-tweeting it.

I don’t want to explain exactly why I personally found this concept funny. I probably don’t have to explain it; I think it’s obvious to most people.

But why did this subject seem to strike a chord with just about every designer/developer/agency/programmer on Twitter? I’m curious to hear what others think.

Related posts:

1. What’s the Best Source for Browser Usage Stats?
2. Book Giveaway: The Book of Ruby
3. Book Giveaway: HTML5 & CSS3 for the Real World

CSS Font Stack

A simple tool to let you choose what CSS font stack to use. Also gives you Mac and Windows compatibility for each stack and includes stacks for serif, sans-serif, and monospaced fonts.

FFFFALLBACK

FFFFALLBACK is a bookmarklet that lets you easily find fallback fonts for your web fonts to ensure that your designs degrade gracefully.

Hoodie

“Hoodie aims to combine the best of the best frameworks into a single package to speed your development.” Includes portions of Twitter Bootstrap, Meyer reset, Normalize.css, Selectivzr, HTML5 Boilerplate, and more.

HTML5 Elements Quiz

Pretty simple. A game to test how many valid HTML5 elements you can name. This isn’t just the new elements, but any element that’s valid with an HTML5 doctype.

simurai’s CSS lab

Simurai is a web developer based in Amsterdam. He’s one of these somewhat mysterious and quiet front-end geniuses that you see make an appearance in various places online. His site has a “lab” section with some neat CSS3 demos and experiments that are worth poking around.

Video.js

A cool HTML video player that boasts “same HTML/CSS skin and JavaScript API for HTML5 and Flash Video” plus additional fullscreen and subtitle support. Definitely an option to consider for those looking for bulletproof HTML5 video.

CSSrefresh

“CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.”

CSS Arrow Please

You probably know that arrows and other shapes can be created with pure CSS using pseudo-elements. Well, this is a simple app that lets you create a CSS tooltip-like box with an arrow. You can modify the color, size, and location of the “arrow” and see it change in real time along with the code that produces it.

CSS3 Responsive Slider

This is a responsive, pure CSS3 image slider that uses a combination of CSS3 transitions and radio buttons to create functionality similar to that of a JavaScript-based slider.

More Tools/Sources Welcome

I don’t do these types of lists too often, but if you have any tools or resources that would be of interest to front-end developers, feel free to tweet me, contact me or post a comment here.

Related posts:

1. Some HTML5 Resources Worth Checking Out
2. Some JavaScript Resources Worth Checking Out
3. Roundup of HTML-Based Slide Deck Toolkits

I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for a description.

You can also view the alternate demo that doesn’t use submenus.

The HTML is structured using unordered nested lists. I suppose I could have used ordered lists to facilitate maintainable numbering, but I thought it was fine this way and if someone wants to use ordered lists they can just alter the markup and make a small change in the script.

After you include the plugin in your page, here’s how you use it:

// call the plugin on the "#toc" element
$('#toc').fixedTOC({
	menuOpens: 'click',
	scrollSpeed: 1000,
	menuSpeed: 300,
	useSubMenus: true,
	resetSubMenus: true,
	topLinkWorks: true
});

The default settings are shown above. You don’t actually have to include any of these, this is just so you can see the available customizable options. And here’s a description of what they do:

menuOpens
The jQuery event that will open the menu. The two most logical options are click and mouseenter.

scrollSpeed
Speed of the animated scrolling, in milliseconds.

menuSpeed
Speed of the “dropping” menu and submenus, in milliseconds.

useSubMenus
If your menu doesn’t have any nested lists, which means no “submenus”, then set this to false. This will cause the main menu links to become active. By default, the main menu links don’t scroll to anywhere, they just open the submenus.

resetSubMenus
By default, each time you mouse off the menu, the menu collapses and any active submenu also collapses. If you want to keep the active submenu open, set this to false.

topLinkWorks
Finally, if your page doesn’t include the “top” link (which appears on the demo in the bottom right area of the page, letting the user scroll back to the top), set this to false.

Each of the hyperlinks in the menu needs to correspond to an ID on the page for the in-page-scroll part to actually work. And my demo is also responsive and slightly changes the look of the menu and “top” link on a small screen (although I haven’t really done too much testing for this).

If you have any suggestions or feedback, comment below or open an issue on the GitHub repo. I suppose it would be cool to expand the script to be able to parse the HTML and create the drop-down menu automatically like this script does. Also, I haven’t done anything special in the CSS to deal with JavaScript-off users, but you could easily add a “no-js” class to the body and use that CSS hook to do some stuff when JavaScript is off, and remove the class when JavaScript is on (as Modernizr does).

Related posts:

1. Slide-Down Mega Drop-Down Menus with Ajax and jQuery
2. One Thing I Don’t Like About Drop-Down Menus
3. Linking to jQuery: Always Reference a Specific Version

But I like CSS a lot. So as a follow-up, I thought it would only be fair to list some of the things in CSS that I think work very well and thus are valuable to know and use often.

Media Queries

Whoever thought up this idea is a genius. Media Queries are at the heart of the responsive design movement and they make writing cross-browser CSS fun again. They let us focus on flexibility of design that isn’t device-specific, but instead allows us to adjust the look and size of the layout depending on the size of the screen.

Overall, a very good part of CSS.

Classes

Classes are fantastic. You could write your entire stylesheet using classes for 95% of your selectors (which you should be doing) and you would have an efficient, easy-to-maintain stylesheet.

Especially when you use multiple classes on a single element are classes super-useful, and when you combine that with chaining classes, they’re even more powerful.

Min-/Max- Width/Height

Even with all of IE’s annoying bugs, using properties like min-width and max-height has been a great gift to CSS. max-width is especially useful when you want to prevent your responsive designs from going super-wide on really large browser windows.

So take advantage of the good browser support for these four properties and use them to add the perfect amount of flexibility to your designs.

Inline-Block

Is it a div? Is it a piece of text? Is it a form element? Nobody knows! Well, okay, we know. But elements that are styled as display: inline-block have all the benefits of block elements (including full margin sizing and width/height support) but can flow with inline content and be subject to white space and the vertical-align property.

This is a great feature of CSS to remember for doing neat things with inline elements.

Relative and Absolute Positioning

Although they should not be overused for fear of making a layout unmaintainable or inflexible, using and understanding relative and absolute positioning in CSS is essential to improving your CSS skills.

So if you don’t yet use positioning tricks in your layouts, then you’re missing out on a very easy and more or less cross-browser way to get things looking good.

Fixed Elements and Backgrounds

I think it’s safe to say this one was popularized by the granddaddy of all CSS galleries, css Zen Garden. Two of my favourites on there include Retro Theater (which scrolls credits like on a movie screen around fixed elements) and Mozart (which uses background-attachment: fixed to fix the background in place while the page scrolls).

I definitely think fixed backgrounds are not used enough nowadays and can open up a lot of creative possibilities.

Line Height

What would we do without this one? The line-height property has great browser support and can even be used to center elements vertically. But best of all, it allows us to make pages readable and attractive. So use it abundantly along with other typographic CSS properties.

Pseudo-Elements

Do I even have to explain this one? Well, if you’ve been living under a rock or if you’re new to CSS then definitely check out this roundup, this archive, and my introductory tutorial on the subject.

Transitions and Transforms

Although not all in-use browsers support them, and you still need all the vendor prefixes, combining transitions with transforms is a very nice addition to CSS.

Not only does this combo relieve us of the need for bloated jQuery scripts and plugins, they also degrade nicely. Thus, if a browser doesn’t support them, the user will just see static elements and he’ll be none the wiser.

@font-face

Web fonts are better now than they’ve ever been. Yes, the syntax for cross-browser web fonts is complicated and has a long evolutionary history. But with services like Google Fonts and Font Squirrel’s generator, web fonts have never been easier to use.

Easy One-Line Comments

In my “bad parts” post, one of the things I described was the fact that CSS doesn’t allow a double slash for comments the way other languages do. Well, that doesn’t mean you can’t do easy single-line comments. You see, browsers will ignore any line or block of CSS that they don’t recognize, so you could easily comment out a line or a block by putting a double forward slash (or really any random characters) at the start of any line of CSS.

I wouldn’t allow such comments to go into production code, but it can certainly be handy to quickly add a character to a line (or even a selector) just for temporary testing purposes, rather than having to add “/*” and “*/” to every block you want to comment out.

box-sizing: border-box

The standard box model was one of the “bad parts” in the previous post, so it’s only natural that this one is a “good part” of CSS. And it is. Paul Irish explains how good it is, so I won’t go into the details here.

And best of all? IE8 supports it. So if you’ve dropped support for IE6/7, then you’re ready to use this and make recalculating widths and padding a thing of the past.

Attribute Selectors

Although these have bugs in a lot of older browsers, overall they’re pretty safe to use.

They can come in handy when targeting HTML that you have no access to (and thus can’t add a class or ID to) and you can even use them to target elements with data attributes, which are custom attributes that you create yourself.

What Are Your Favourite Parts of CSS?

This list doesn’t include a lot of new CSS3 features; for many of those, the jury is still out on whether they will be useful and perform well. And poor browser support (specifically IE7/8), in my opinion, rules out many of them as being laballed “good parts” just yet.

But I’m sure you have your own personal favourite parts of CSS — so post a comment if there’s anything valuable you feel I’ve missed.

Related posts:

1. CSS: The Bad Parts
2. Every Time You Make a Good Business Decision, a Puppy Gets Cloned
3. Is HTML5 Good for SEO?

But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition. Here’s the code:

.mouseout {
	width: 300px;
	height: 300px;
	margin: 100px auto;
	background-color: #bada55;
	-webkit-transition: -webkit-transform 2s linear;
	-moz-transition: -moz-transform 2s linear;
	-ms-transition: -ms-transform 2s linear;
	-o-transition: -o-transform 2s linear;
	transition: transform 2s linear;
}

.mouseout:hover {
	cursor: pointer;
	-webkit-transition: -webkit-transform 0s linear;
	-moz-transition: -moz-transform 0s linear;
	-ms-transition: -ms-transform 0s linear;
	-o-transition: -o-transform 0s linear;
	transition: transform 0s linear;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

And here’s the demo page link:

Notice what happens when you hover on and off. Hovering on seems to have no effect, but then hovering off causes the element to animate a rotation transform.

How Does it Work?

There’s nothing too tricky going on here. Firstly, we take advantage of the fact that you can have different transitions for hovering on, and hovering off. Second, we use a timing of 0s to disguise the hover on.

You’ll notice on hover we’re rotating the box 360 degrees. This doesn’t change the box’s position at all, because 360 degrees means it comes back ‘full circle’ to where it started. But because the transition is taking place over a time of zero seconds, that means it’s instantaneous. So it appears as if there is no transition taking place at all.

Then, when you hover-off, the hover off transition on the element takes place, thus returning the box to its original state — even though it already is in its original state. The hover-off transition takes place over a duration of two seconds, thus making the transition visible and giving the false appearance of a mouseout even occurring without a mouseover event.

Interesting, but probably very limited in possibilities. I really can’t think of any other property that could give the appearance of no hover-on transition. Let me know if you can think of another way to do this with CSS alone.

Related posts:

1. Alternative Units for CSS3 Rotation Transforms
2. CSS3 Transitions Without Using :hover
3. The Subtleties of CSS3 Transitions

As always, I can’t necessarily vouch for the quality and accurateness of all of these sources, but they are all certainly worth a glance. Enjoy.

Google JavaScript Style Guide

This is a somewhat obscure resource, and I haven’t delved into it much, but looks like it could contain some interesting nuggets. This is basically Google’s style guide for writing JavaScript. It’s divided into two main sections: Language Rules and Style Rules. They sum it up nicely: “The point of having style guidelines is to have a common vocabulary of coding so people can concentrate on what you’re saying rather than on how you’re saying it.”

Starbucks’ Style Guide

This one made the rounds a few weeks back thanks to a tweet by Nicole Sullivan. More and more large sites and apps are adapting responsive, flexible, CSS that uses OOCSS principles, and this is a good example. The guide has some options in the top-right corner of the screen that let you toggle stuff you want highlighted or visible while you check out various features of the guide.

A Test-Driven JS Assessment

This is an interesting little project by Rebecca Murphey. It’s a GitHub repo that consists of “a set of tests that can be used to assess the skills of a candidate for a JavaScript position, or to improve one’s own skills.” There are instructions on how to install and run the tests locally. Definitely something for front-end developers who want to take their JavaScript to the next level.

A Baseline for Front-End Developers

More awesomeness from Rebecca. In her own words: “There’s a new set of baseline skills required in order to be successful as a front-end developer, and developers who don’t meet this baseline are going to start feeling more and more left behind as those who are sharing their knowledge start to assume that certain things go without saying.” Although not everyone agrees with her assessment of the front-end baseline, I think this is a must-read for all front-end developers. You can also check out this slide deck that covers the same subject.

HTML5 Please

Although this one definitely needs a new name (most of what it covers is not “HTML5″), this is a great resource for dealing with the realities of web development today. That is, the fact that there are multiple worlds of support because of older versions of IE still in use, and the fact that even modern browsers don’t have consistent support. In a nutshell, this projects helps you “use the new and shiny responsibly.”

Understanding JavaScript OOP

This looks like a really good in-depth little mini-book on OOP principles and how they’re used in JavaScript. It’s written by a Brazil-based front-end developer by the name of Quildreen Motta. The coolness of his name alone makes this one worth reading! :)

The State Of HTML5 Video

This is a regularly-maintained page on the LongTail Video site. It summarizes browser support in chart format for a number of different HTML5 video-related features including media formats, the API, accessibility, and more. Pretty comprehensive stuff that’s comparable to what Wufoo did with HTML5 forms.

Related posts:

1. Skills for Front-End Developers
2. Why Developers Should Be Studying HTML5′s Design Principles
3. Video For Everybody — Except Developers!

• nth-child()
• nth-last-child()
• nth-of-type()
• nth-last-of-type()

The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression.

The keywords and the integer are pretty straightforward. A value of “even” or “odd” selects the even or odd elements, respectively, and an integer selects the nth of the targeted element. In other words, “li:nth-child(4)” means the “4th” list item will be selected.

The expressions, on the other hand, are a little more complicated, but not too bad once you mess around with them a little.

Expression Syntax

The basic syntax for a pseudo-class expression looks like this:

li:nth-child(an+b) {
	/* styles here */
}

Except for the “n”, the above is not valid, but serves to illustrate the expression in algebraic-like notation. In that expression, each of the letters “a” and “b” would be integers. Here’s what these letters represent:

What is the “b” part?
The “b” part of the expression is an integer that tells the browser what is the first of that type of element to select. Thus if the “b” part is “4″ then the “4th” element will be selected first, and all preceding elements are ignored.

What is the “a” part?
The “a” part of the expression is an integer that tells the browser which of those types of elements to select after the first one has been selected. So if “a” is represented by the integer “3″, and “b” is still “4″, then that means the 4th of that type of element will be selected first, and then every 3rd instance of the element will be selected afterwards, until no more can be found.

What is the “n” part?
As alluded to above, the “n” part doesn’t get changed when you write your expression. The “n” is an indicator to the browser to identify the “a” part. This will make more sense in the real examples below.

Some Real Examples

Below are some legitimate examples using different pseudo-classes. Each example is followed by an explanation of what that example does. Keep in mind that, for all of these structural pseudo-classes, the elements selected are siblings. That is, they are children of the same parent element. This means the expression begins counting anew for each parent that contains the selected elements.

Expression: 4n+2

li:nth-child(4n+2) {
	background: hotpink;
}

↑ Selects the 2nd list item, and every 4th list item after that.

Expression: 5n-1

li:nth-child(5n-1) {
	background: hotpink;
}

↑ Selects the -1st list item, and every 5th list item after that. Because the first-selected element is a negative number (-1), you have to imagine a sort of “ghost” element appearing before the real list of elements, and you would also have to include a zero-level element that gets counted when every “5th” element begins to be counted.

Expression: -2n+7

li:nth-child(-2n+7) {
	background: hotpink;
}

↑ In this example, the “b” part is given a negative integer. This will select the 7th list item and then every -2nd list item after that. This means that no list items will be selected after the 7th one. But instead, after selecting the 7th one, the count will reverse and go back up the list, selecting every 2nd element.

Expression: 4n+7

li:nth-last-child(4n+7) {
	background: hotpink;
}

↑ This one uses the “nth-last-child” pseudo-class, which means the expression starts at the bottom of the list. This will select the 7th-last list item (i.e. 7th from the bottom of the list) and every 4th-last list item after that.

Expression: 3n-2

li:nth-last-child(3n-2) {
	background: hotpink;
}

↑ Again, we’re using “nth-last-child”, but this time we’re combining it with a negative integer. This example selects the -2nd-last list item (meaning you have to imagine a “ghost” zero item along with 2 other “ghost” elements) and every 3rd-last list item.

Expression: 5n+3

p:nth-of-type(5n+3) {
	background: hotpink;
}

↑ This example uses the “nth-of-type” pseudo-class. This means only the referenced element will be included in the expression. In this case, we’re targeting paragraph elements. So this will select the third paragraph element then every 5th paragraph after that.

Expression: 2n+8

div:nth-last-of-type(2n+8) {
	background: hotpink;
}

↑ This example uses “nth-last-of-type”, which selects the last element of that type of element. In this case, we’re targeting <div> elements. So all other elements will be ignored, even if they are in between. This will select the 8th-last <div> element, and every 2nd last <div> element after that.

Browser Support and Other Notes

Here are some things worth mentioning about these expressions:

• Browser support is very good; the only significant lack of support is (and you’ll be shocked to hear this) IE6-8.
• There are older browsers like Firefox 3.0, Safari 3.1 and Opera 9 that don’t support these but their market shares are so low that for most people this wouldn’t be a factor
• You can polyfill support for these using Selectivizr but read this before you do
• If you use the same integer for “a” and “b”, then you can omit the “b” part in the expression; in other words, 3n+3 would have the same result as 3n
• If you use “1″ for the “a” part, you can omit it but leave the “n”; in other words, 1n+5 is the same as n+5
• If you use a zero for the “a” part, you can omit the “a” part altogether; in other words, 0n+3 is the same as 3

(Thanks to Ana in the comments for helping me undiscombobulate the logic in a few of those bullet points)

Related posts:

1. The CSS white-space Property Explained
2. The “inherit” Value for CSS Properties