CSS nth child selector

Question

I have a problem with css selectors, I have 2 buttons rendered into HTML by a external javascript, and the buttons are at the bottom and at the top of my page.

So if I customize CSS with mutual class name one button looks fine but the other does not, so here is my idea:

• select the first button of a xclassname and give it some CSS
• do nothing to the other button leave its CSS as it is how can I do that

Here is how I failed to do it with CSS:

.xclassname:nth-child(1) {
  ⋮ declarations
}

Nothing happened, can anyone think of something that will work? btw, I use Prototype, not jQuery

Answer 1

That's a CSS3 selector. Are you using IE? Because that selector isn't goint to work there at all. It should work in Chrome, Safari, or a later version of Firefox.

The workaround that I would use would be to use JQuery to perform this operation instead. Use the nth-child() selector in JQuery to add a class which has the style declaration you want. It's a bummer that IE is so behind the times, but that's why it's the bane of the existence of every web developer around...

Answer 2

The accepted answer is wrong. The Prototype docs actually provide an nth child example and the OP actually mentions that he uses Prototype so he doesn't need to worry about IE.

This is the nth child example provided in the docs:

$$('table tbody > tr:nth-child(even)');

Given what you're trying to do though you could target the element like this:

$$('.xclassname').first().setStyle({
  // some style here
});