CODEWITHSUNDEEP
asp.nethtml-lists
ANP
ANP

Reputation: 15607

Hide list-style image for one specific list item

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?

Upvotes: 0

Views: 2129

Answers (2)

Buhake Sindi
Buhake Sindi

Reputation: 89189

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>

Upvotes: 1

Alin P.
Alin P.

Reputation: 44346

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

Upvotes: 1

Related Questions