CODEWITHSUNDEEP
csscss-selectors
Dev P
Dev P

Reputation: 1187

Css selectors SharePoint 2010

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"?

Upvotes: 2

Views: 594

Answers (4)

Dev P
Dev P

Reputation: 1187

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.

Upvotes: 0

jmshapland
jmshapland

Reputation: 483

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

Upvotes: 0

mafafu
mafafu

Reputation: 1266

One possibility if your title is unique:

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

Upvotes: 0

Luca
Luca

Reputation: 9705

.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)

Upvotes: 1

Related Questions