Is my use of CSS inheritance clean enough for these sprites?

I have a set of links with background images on this CodePen.

I am seeking feedback to see if I did this the most optimal way. For example, I made a sprite so that I can just load one image. And I leveraged inheritance so that I did not have to assign every containing div a class. Just used a child selector and for the individual buttons, I used :nth-of-type to pass the background image.

Tell me your thoughts if this could use improvement.

HTML

  
     
      Dentist
    
  

  
     
      Patient
    
  

  
      
      Lab
    
  

CSS

.introSelect { text-align:center; }
.introSelect div {
  display:inline-block;
  position: relative;
  text-align: center;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/bruxzir-user-sprites_1.png') no-repeat;
  width: 90px;
  height: 90px;
}
.introSelect div:nth-of-type(1) {
  background-position: 0 -180px ; 
}
.introSelect div:nth-of-type(2) { 
  background-position: -90px -180px; 
}
.introSelect div:nth-of-type(3) { 
  background-position: -180px -180px; 
}

.introSelect a {
  display:block;
  text-decoration: none; 
}
.introSelect span {
  background-color: rgba(152, 216, 242, 0.7);
  color: #444;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute; bottom: 0; left: 0; right: 0;
}

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; 
}

StackExchange Code Review Q#40488, answer score: 11