Adding selected row color to alternate kendo grid CSS

Question

I have a kendo grid and it contains rows of different colors. I am trying to add row selected color to alternate rows like 1,3,5,7.... since the rows 2,4,6,8... selected color works fine, but when alternate row is selected it wont display the selected color, i believe I might have left something couldn't able to find, please let me know what I am missing

CSS CODE

This is the css for all rows

.k-grid-content > table > tbody > tr 
{
background:rgba(63,193,192, 0.1);
/*opacity:0.8;*/
filter:Alpha(opacity=50); /* IE8 and earlier */
border:1px solid white;
color:#494949;   

cursor:pointer;
transition:color 1s ease;
transition:background 1s ease; 
}

This CSS for alternate Row

.k-grid-content>table>tbody>.k-alt
{
   background:rgba(63,193,192, 0.2);   
    filter:Alpha(opacity=50); /* IE8 and earlier */    
}

This is for selected rows(where it works only for alternate row)

.k-grid table tr.k-state-selected
{
background: #22B99F;

 }

Below is the image describing the question

Answer 1

Here is the example by assuming your issue

The issue is with your css file. The alternate rows does not work because (i think) that you have written

.k-grid table tr.k-state-selected
{
    background: #22B99F;
}

.k-grid-content>table>tbody>.k-alt
{
   background:rgba(63,193,192, 0.2);   
   filter:Alpha(opacity=50); /* IE8 and earlier */    
}

Here the styles for alternate rows will override the style of the selected rows, so instead try to specify the selected row's color after .k-grid-content>table>tbody>.k-alt that is

.k-grid-content>table>tbody>.k-alt
{
   background:rgba(63,193,192, 0.2);   
   filter:Alpha(opacity=50); /* IE8 and earlier */    
}

.k-grid table tr.k-state-selected
{
    background: #22B99F;
}

Here is the solution