Hide list-style image for one specific list item

Question

I am having an unordered list like:

<ul style="list-style: square url(Images/rssIconSmall.png)">
                    <li><h3>All Items</h3></li>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
</ul>

Since I am giving "list-style" as image it appears for all the list items. But I do not want to display the image for the first item. I mean for "All Items" the image should not be displayed. Is it possible?Can anyone help me?

Answer 1

Hi,

Just add style="list-style:none outside none;" on the element you don't want to have a bullet. Or customize it however you want.

Regards, Alin

Answer 2

Try using CSS :first-child selector.

ul li:first-child {
 display: none;
}

PS. Some browsers (such as IE) may not work well with that selector: http://reference.sitepoint.com/css/pseudoclass-firstchild

or better yet,

/* CSS */
ul li.first {
 display: none;
}

<!-- HTML -->
<ul style="list-style: square url(Images/rssIconSmall.png)">
                    <li class="first"><h3>All Items</h3></li>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
</ul>