CSS nième sélecteur enfant

Question

J'ai un problème avec les sélecteurs css, j'ai 2 boutons rendus en HTML par un javascript externe, et les boutons sont en bas et en haut de ma page.

Donc, si je personnalise CSS avec le nom de classe mutuelle un bouton semble bien, mais l'autre n'a pas, voici donc mon idée:

• sélectionnez le premier bouton d'un xclassname et lui donner un peu de CSS
• ne rien faire à l'autre bouton quitter son CSS comme il est de savoir comment puis-je faire

Voici comment j'omis de le faire avec CSS:

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

Rien ne s'est passé, quelqu'un peut-il penser à quelque chose qui fonctionnera? btw, j'utilise Prototype, pas jQuery

Answer 1

C'est un sélecteur CSS3. Utilisez-vous IE? Parce que ce sélecteur n'est pas là pour travailler. Cela devrait fonctionner dans Chrome, Safari ou une version ultérieure de Firefox.

La solution de contournement que j'utiliserais serait d'utiliser JQuery pour effectuer cette opération à la place. Utilisez le sélecteur nth-child() dans JQuery pour ajouter une classe ayant la déclaration de style souhaitée. C'est un peu dommage qu'EI soit tellement en retard, mais c'est la raison pour laquelle c'est le fléau de l'existence de chaque développeur web ...

Answer 2

La réponse acceptée est erronée. Les Prototype docs fournissent en fait un nième exemple d'enfant et l'OP mentionne qu'il utilise Prototype pour ne pas avoir à se soucier d'IE.

Ceci est l'exemple n-ième enfant fourni dans la documentation:

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

Compte tenu de ce que vous essayez de faire si vous pouvez cibler l'élément comme celui-ci:

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