How do I remove a specific bullet point within a ul in CSS?

Question

I have a simple list and all I want to do is remove a specific bullet point (just the icon, not the content within the li) within the ul.

I've used first-child to take away the first but I'd like to remove the sixth bullet point!

I could so it inline but I'd prefer to do it with CSS.

How can I do this?

Answer 1

jsFiddle here.

You can use the nth-child selector to achieve this.

---

li:nth-child(6) {
   list-style-type: none; 
}

---

Edit:

It now seems you want to hide it for the last child, you can use the last-child selector instead:

New jsFiddle here.

li:last-child {
   list-style-type: none; 
}

---

If you'd like to get either of these working in IE6-8, you could use Selectivizr.

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8"

nth-child and last-child are some of those supported selectors in Selectivizr.

Answer 2

Use nth-child DEMO http://jsfiddle.net/L8VW4/

This will remove the list item

li:nth-child(6) {
   display: none; 
}

This will remove only the bullet icon present beside the list item and leave the list item itself in place

li:nth-child(6) {
  list-style: none;
}