Is my use of CSS inheritance clean enough for these sprites?
There hasn't been a good reason to use extra elements such as spans for purposes of hiding text in the last 10 years.  If you need to support very old browsers, negative indentation is the simplest method.  Otherwise, there's plenty of clean, modern techniques to choose from.

.foo {
    text-indent: -100em;
}



http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/


There's not really a good reason to use nth-child here.  You'd be better off using self-documenting class names.  If the order of the images need to be adjusted, then you don't have to make modifications in multiple places (markup and CSS).

.introSelect .dentist {
  background-position: 0 -180px ; 
}
.introSelect .patient { 
  background-position: -90px -180px; 
}
.introSelect .lab { 
  background-position: -180px -180px; 
}