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

Question

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

<div class="introSelect">
  <div>
    <a href="#"> <!-- Link Pending -->
      <span>Dentist</span>
    </a>
  </div>

  <div>
    <a href="#"> <!-- Link Pending -->
      <span>Patient</span>
    </a>
  </div>

  <div>
    <a href="#"> <!-- Link Pending --> 
      <span>Lab</span>
    </a>
  </div>

</div>

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

Answer 1

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

Answer 2

if you don't want to mess with all the headache of the HTML and CSS you could just create an Image map

in other words you create the image

and then you map out the separate squares using the HTML syntax and link them to the right pages. this minimizes the amount of HTML and CSS, and makes sure that your font is always displayed.

if you want to see how to do it check with this link about Creating HTML Image Maps

it would look something like

<img src="MenuMap.gif" usemap="#MenuMap" />

<map name="MenuMap">
    <!-- these are only examples.  use a picture editor to get the coords. -->
    <area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
    <area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
    <area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>

the only time that I ever did this I was using Dream Weaver and it gave me the coords.

I think this would be the perfect use for it though. if you want to make it look the way you want.

if the person zooms in or whatever the picture stays the same and so does the map, so they would always hit the links. No Divs, no Spans, just nice and neat.

---

Updates from Research

Responsive Image Maps jQuery Plugin by Matt Stow a little link that I stole from an answer, probably can't be used as OP said that they wanted to use pure CSS, not sure how this translates for jQuery though.

also, found this out about SEO on image maps,

sounds like there are some Google Search Bots that don't crawls these "links" and some that do, but the final decision that every blog that I have seen so far is that the image map is SEO Friendly and will still show up for SEO.

Joe Hall Post

Image Map Crawlability

What you should know about Image Maps

When it comes down to it, Google is all about content, and alt content is something that SEO is driven on, but you can't just spam it with keywords, because we all know that Google is savvy to this abuse and will shut you down.

One person mentioned the href saying

an href is an href is an href

I am going to have to agree with this. I think that Google watches the traffic in and out of the site as well as the content on the page to determine what is relevant and what isn't.

---

I Tried to make sure that all the links I looked for were the newest ones that I could find