CSS nth child selector

Question

У меня проблема с селекторами css, у меня есть 2 кнопки, которые отображаются в HTML с помощью внешнего javascript, а кнопки находятся внизу и вверху моей страницы.

Так что, если я настроить CSS с именем взаимного класса одна кнопка выглядит нормально, но другой нет, так вот моя идея:

• выберите первую кнопку в xclassname и дать ему некоторые CSS
• не делать ничего другого кнопки оставить свой CSS, поскольку это, как я могу это сделать

Вот как я не в состоянии сделать это с помощью CSS:

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

Ничего не случилось, может кто-нибудь подумать о чем-то, что сработает? btw, я использую Prototype, а не jQuery

Answer 1

Это селектор CSS3. Вы используете IE? Потому что этот селектор не предназначен для работы там вообще. Он должен работать в Chrome, Safari или в более поздней версии Firefox.

Обходным решением, которое я бы использовал, было бы использовать JQuery для выполнения этой операции. Используйте селектор nth-child() в JQuery, чтобы добавить класс, который вам нужен. Это облом, что IE так отстает от времени, но именно поэтому это проклятие существования каждого веб-разработчика вокруг ...

Answer 2

Принимаемый ответ неверен. Prototype docs фактически предоставляют пример n-го ребенка, и OP фактически упоминает, что он использует Prototype, поэтому ему не нужно беспокоиться об IE.

Это энный пример ребенка предоставляется в документации:

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

Учитывая то, что вы пытаетесь сделать, хотя вы могли предназначаться элемент вроде этого:

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