html - How to use :nth-child pseudo-class to change color of tiles on odd rows -

html - How to use :nth-child pseudo-class to change color of tiles on odd rows -

i'm building ui have display 2 tiles on single row. i'm trying accomplish have color of tiles on odd numbered rows changed. i'm doing:

div.tile:nth-child(odd),button.btn-odd:nth-child(n) { background: rgba(26, 188, 156,1.0); border-color: rgba(26, 188, 156,1.0); } div.tile:nth-child(odd):hover,button.btn-odd:nth-child(n):hover,div.tile:nth-child(odd):hover .btn-odd { background: rgba(22, 160, 133,1.0); border-color: rgba(22, 160, 133,1.0) } button.btn-odd:nth-child(n):focus { background: rgba(22, 160, 133,1.0); border-color: rgba(22, 160, 133,1.0) } button.btn-odd:nth-child(n):active { background: rgba(22, 160, 133,1.0); border-color: rgba(22, 160, 133,1.0) }

for more information, check out fiddle: http://jsfiddle.net/zc43w/ [stretch out see 2 tiles on row] problem tiles on first row giving me required effect. however, tiles on 2nd row (even row) exhibiting same effect (green color although should blue). can tell me why happening? seems nth-child selector selecting rows instead of odd numbered rows.

you should utilize these selector...

div.row:nth-child(odd) div.tile div.row:nth-child(odd) div.tile .btn-odd div.row:nth-child(odd) div.tile:hover div.row:nth-child(odd) div.tile:hover .btn-odd

... , on, want effect kick in based on row's (and that's div.row) index.

as stands now, selector covers elements - each div.tile single kid of div.col-md-6 element. , 1 odd number, right. )

demo.

as sidenote, using :nth-child(n) plain redundant (it'll applied any element covered preceding selector). unless need upper specificity of selector - again, there improve ways accomplish this.

html css css-selectors