The Scenario

Start with this markup:

The Challenge

Write the CSS required to make:

• In modern browsers
  • The first two inputs have a green border
  • The next two inputs to have a yellow border
  • Any further inputs to have a red border
• In older browsers
  • All inputs have default border (no custom styling)

It should look like this in a modern browser like IE9:

And this in an older browser like IE8:

You can use a browser to test your work.

You can not change the markup.

The dotted border is just to outline the screenshot - you don't need that in your own CSS.

How to Play

Post your CSS as a comment. Comments will be held in the moderation queue until the answer is posted. Full answer and explanation will be appended to this post around 72 - 96 hours after the question is posted. Update: answer now posted below.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to know when the answer is up and to catch the next question.

This goal of this question was to a) utilize one of the new CSS3 selectors and b) do so using progressive enhancement. Progressive enhancement is mentioned heavily in the world of JavaScript, but not always considered with CSS.

My solution was this:

First, I apply a red border to all* of the inputs, then I change the first four to yellow, then the first two to green. Order of the rules is important as I'm using a layering approach.

You could also use a little bit more code to achieve a more readable result: 

I target specific elements using the nth-child psuedoclass. We could read :nth-child(-n+4) as 'go to the fourth child element, then step back one at a time'.

When describing the layering approach in that previous paragaraph, I put an asterisk next to where I said "all of the inputs". This is because I used :nth-child(n) as effectively a no-op. That part of the selector will apply to all elements, and could be considered redundant. That's only true for newer browsers that understand it though. Older browsers will ignore the whole rule. I have utilized this behaviour as a form of feature detection - if the browser supports nth-child, apply the green/yellow/red styling; if not, don't style any of the inputs. As we adopt more and more CSS3 through our designs, I'd highly encourage you to use this approach where possible.