Css selectors SharePoint 2010

Question

I have the following html structure:

<div class="ms-PostFooter">

<span style="">
<span style="" class="s4-clust">
<a href="#" style="">
<img src="" alt="" style="l" title="" class="imglink" longDesc="" />
</a>
</span>
</span>

<span style="">
<span class="s4-clust">
<a href="#" style="">
<img src="" alt="" style="" title="" class="imglink" longDesc="" />
</a>
</span>
</span>

<span style="">
<span class="s4-clust">
<a href="#" style="">
<img src="" alt="" style="" title="Number of Comments" class="imglink" longDesc="" />
</a>
</span>
</span>

</div>

In css how would I select the third tag in order to hide the image with title "Number of Comments"?

Answer 1

.ms-PostFooter span::nth-child(3) img {
    display: none;
}

or this also works:

img[title="Number of Comments"] {
    display: none;
}

however these rely on your markup / content. the best way would be - generate a specific class on that image or its container, server-side (if you can)

Answer 2

One possibility if your title is unique:

[title="Number of Comments"]
{
    display:none;
}

Answer 3

You can use the following:

div :last-child span .imglink{
   display:none;
}

jsfiddle: http://jsfiddle.net/kGThS/1/

This may be more specific:

.ms-PostFooter :last-child span .imglink{
   display:none;
}

jsfiddle: http://jsfiddle.net/kGThS/3/

To hide the entire last span/link as per your comment below use the following:

.ms-PostFooter :last-child span{
   display:none;
}

Answer 4

Somehow through css sharepoint was not allowing me to use any of the selectors mentioned here through css to get rid of the specif tag containing the link and image to be removed so I decided to use jquery instead which did the trick as follows:

$( document ).ready(function() {
$('DIV.ms-PostFooter span:nth-child(3)').css('display', 'none');
$('DIV.ms-PostFooter span:nth-child(4)').css('display', 'none');

});

Thanks for all the assistance.