How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

Question

I am working on a website that's built on a custom CMS platform, and the site's owners want me to replace the "Home" navigation menu item with a home icon/image. Ordinarily, this would be a cinch, but I don't have access to the HTML/PHP files, and the CMS doesn't let me add classes to menu items. I also can't add Javascript, so I have to do it through CSS.

The HTML generated by the CMS looks more-or-less like this:

<header class="header">
  <nav>
    <ul>
      <li><a href="http://www.home.com/">Home</a></li>
      <li class="first"><a href="http://www.home.com/about">About</a>
        <ul>
          <li><a href="http://www.home.com/about/team">Team</a></li>
        </ul>
      </li>
      <li><a href="http://www.home.com/services">Services</a>
        <ul>
          <li><a href="http://www.home.com/services/financial">Financial</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

I thought I might be able to accomplish it through something like this:

.header nav > ul > li:first-of-type {
  background: url('home.png') no-repeat center top;
  -webkit-transition: background-position 0.3s ease-in; 
     -moz-transition: background-position 0.3s ease-in; 
       -o-transition: background-position 0.3s ease-in; 
          transition: background-position 0.3s ease-in; 
}

.header nav > ul > li:first-of-type:hover {
  background-position: center bottom;
}

.header nav a[href="http://www.home.com/"] {
  color: transparent !important;
}

But that doesn't seem to be doing the trick. Is my syntax wrong somewhere, or is there something that I'm missing? And if you have a better way to do this through straight CSS, I'm all ears.

You can take a look at the full code with this JS Fiddle .

Thanks!

Answer 1

Once clear the issue with the class, there are only 2 issues pending. The background position should be left instead of center, and the selector for the a doesn't work. You can keep the style that you where using for the previous elements, it is even more clear:

.header nav > ul > li:first-of-type {
    background: url('http://placekitten.com/20/60') no-repeat left top;
    -webkit-transition: background-position 0.3s ease-in; 
    -moz-transition: background-position 0.3s ease-in; 
    -o-transition: background-position 0.3s ease-in; 
    transition: background-position 0.3s ease-in; 
}


.header nav > ul > li:first-of-type:hover {
    background-position: left bottom;
}

.header nav > ul > li:first-of-type a {
    color: transparent;
}

BTW, the important was not necessary

demo

(Just change the kitten image for another that fits better)