CSS nth child selector

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

Solution

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...