Sprite using both .png and webp

Question

I set .webp and no-webp using modernizr-custom.js and it is working fine is css for many background images.

I am stuck on how to apply it to the code below and have tried multiple ways without success. Thank you for your assitance. With the code below no images display. Just using .webp image alone works in browsers that support webt but then older browsers wont support it.

/******************************************* Sprites *******************************************/
#fancybox-close,
.SI-FILES-STYLIZED .cabinet,
.SI-FILES-STYLIZED .cabinet:hover,
.arrow-link-down,
.arrow-link-up,
.big-btn,
.big-btn:hover,
.checklink-box ul li a,
.close_button,
.crlist,
.crlist:hover,
.ez-checkbox,
.ez-checked,
.ez-radio,
.icon,
.left-col .icon,
.mid-btn,
.mid-btn:hover,
.minus,
.minus:hover,
.plus,
.plus:hover,
.search-btn,
.search-btn:hover,
.selectBox-arrow,
.tip-boxes span.triangle,
.title-icon,
a.arrow-link,
a.arrow-link-left,
a.arrow-link:hover,
a.fb-icon,
a.fb-icon:hover,
a.twitter-icon,
a.twitter-icon:hover,
div#tab-indicator,
footer#footer div.container,
li#login,
li#login>a,
nav.slides-nav ul li a {
.webp background-image: url(../img/sprite.webp);
.no-webp background-image: url(../img/sprite.png);
background-repeat: no-repeat
}

Answer 1

you have .webp and .no-webp classes in the wrong place, rather than...

    .....  
    nav.slides-nav ul li a {
       .webp background-image: url(../img/sprite.webp);
       .no-webp background-image: url(../img/sprite.png);
       background-repeat: no-repeat
    }

it should be

    .....  
    .webp nav.slides-nav ul li a {
       background-image: url(../img/sprite.webp);
       background-repeat: no-repeat
    }
    .....  
    .no-webp nav.slides-nav ul li a {
       background-image: url(../img/sprite.png);
       background-repeat: no-repeat
    }