Question

Answer: This was a dumb mistake, was using ‘//’ for single line comments instead of wrapping in /**/ (been writing too much javascript lately) Thanks for help, sorry for wasting time.

I cannot figure out why this CSS is not applying only to certain li’s..

Here is the CSS: (notice the comments it says what does and doesn’t apply – it is strange because the facebook link does recognize the class ‘post-face’ of the parent li and applies the link color but the actual li is not recognizing the class on the edit or facebook li’s but it does on the twitter and comment li with the exact same code)

.SL .post .post-det .post-tweet {
    /* DOES APPLY */
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-tweet a { color:#008ebc; } /* DOES APPLY */

/* FACEBOOK SHARE ADDON */
.SL .post .post-det .post-face {
    /* THIS DOESN'T APPLY */
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-face a { color:#A1A1A0; } /* THIS DOES APPLY */
/* END FACEBOOK SHARE ADDON */

.SL .post .post-det .post-edit {
    /* THIS DOESN'T APPLY */
    background: url(images/post-edit-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-edit a { color:#ff0000; } /* THIS DOES APPLY */

Here is the HTML:

<!--start of Latest Posts-->
<div class="latest">
<span class="toptitle"><strong>Latest Post</strong></span>

<div id="post-89" class="post indexpost">
<div class="post-head">
 <div class="post-date">July 6, 2011</div>
  <h2><a href="http://website.com/geo/?p=89" title="Permalink to Get in Touch" rel="bookmark">Get in Touch</a></h2>
 </div>
    <div class="post-con"><p>Geothermal Solutions is proud to serve the Ontario geothermal market for over 5 years installing over 2000 residential systems. We work for HVAC contractors across Ontario. </p> 
<p><a href="http://website.com/geo/wp-content/uploads/2011/07/residential.jpeg"><img class="alignnone size-medium wp-image-112" title="residential" src="http://website.com/geo/wp-content/uploads/2011/07/residential-300x199.jpg" alt="" width="300" height="199" /></a></p> 
<p>With our knowledge and expertise you can have confidence in the loop that is going into the ground and rely on Geothermal Solutions to have it completed in a timely and professional manner. </p> 
<p>We work for many of the major residential ground source installers in Ontario today which trust us for our reputation and quality work they can depend on.</p> 
</div>
 <ul class="post-det">
    <li class="post-tag"><span class="entry-utility-prep entry-utility-prep-tag-links"></span> <a href="http://website.com/geo/?tag=geothermal" rel="tag">geothermal</a> | <a href="http://website.com/geo/?tag=geothermal-energy" rel="tag">geothermal energy</a> | <a href="http://website.com/geo/?tag=green-2" rel="tag">green</a> | <a href="http://website.com/geo/?tag=residential" rel="tag">residential</a></li>
    <li class="post-comment"><a href="http://website.com/geo/?p=89#respond" title="Comment on Get in Touch">Leave a comment</a></li>
<li class="post-tweet"><a href='http://twitter.com/share' class='twitter-share-button' data-url='http://website.com/geo/?p=89' data-text='Get in Touch' data-count='vertical'>Tweet This !</a></li>

  <li class="post-face"><a href='http://facebook.com' class='twitter-share-button' data-url='http://website.com/geo/?p=89' data-text='Get in Touch' data-count='vertical'>Share This !</a></li>  
  <li class="post-edit"><a class="post-edit-link" href="http://website.com/geo/wp-admin/post.php?post=89&amp;action=edit" title="Edit Post">Edit</a></li>  </ul>
 </div>
<!--End of Post -->

</div>
<!--end of Latest Posts-->

Answer 1

This rule is pointing to the wrong icon:

.SL .post .post-det .post-face {
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}

images/post-tweet-icon.png should probably be images/post-face-icon.png.

Not sure about the other one… what’s the exact HTML that’s generated by the edit_post_link() function?