Why does nth-child equivalent work for css selector but not xpath? - selenium

Question

I am trying to get the xpath equivalent of this css_selector of this website.
To get 6 elements I add: div:nth-child(1). For xpath it would be //div[1] yet this makes no difference. I am wanting all the 6 numbers under the left result tab
Css:
div:nth-child(1) > proposition-return > div > animate-odds-change > div > div
Returns 6 elements
xpath (quite similar):
//div[#class='propositions-wrapper'][1]//div[contains(#class, 'proposition-return')]//animate-odds-change//div//div
Returns 18
I desire 6.
<div ng-repeat="odd in odds" class="animate-odd ng-binding ng-scope" ng-class="{
'no-animation': oddsShouldChangeWithoutAnimation
}" style="">2.05</div>

Answer 1

Those are totally different selectors:
CSS: div:nth-child(1) > proposition-return > div > animate-odds-change > div > div
Find every div that is the first child of its parent, then get its direct proposition-return child (I assume you wanted to use it like .proposition-return, then its direct div and so on..
XPATH: //div[#class='propositions-wrapper'][1]//div[contains(#class, 'proposition-return')]//animate-odds-change//div//div
Find all div elements with proposition-wrapper as class, then only get the first. After, find all div with proposition-return class that are descendant of the previous element and so on..
[1] is very different to nth-child(1) to begin with, and also // is not the same as >, but / is.
For getting the specific elements that you want, I would use this xpath:
//div[contains(#class, "template-item")]//div[#data-test-match-propositions]/div[1]//div[contains(#class, "animate-odd")]

Answer 2

that site is not available worldwide, but looking at the img you provided helps. as eLRuLL points out, your xpath is not equivalent to the css.
try getting rid of some of the double slashes
//div[#class='propositions-wrapper']//div[contains(#class, 'proposition-return')]/animate-odds-change/div/div[contains(#class, 'animate-odd')]