This is an issue I run into during my internship (which, by the way is still going on quite well :) ).

Purged from the details of how did the problem rise, here is what it is :
I have a set or data I wanna display using a HTML list (ol or ul).
This is what it looks like when every thing is OK :


  • Data one

  • Data two

  • Data three



The problem emerge when the set contains one item, because it look a little weird to have the bullet point in a list that contains one item, in other words 'a list that is not a list :s !'.
(You can think this is not a big deal, but the meticulous [or perhaps crazy] guy who I am can't let this go).

This is the solution I came up with (be sure that I Googled the stuff to be sure it hasn't been solved elsewhere), and it is pure CSS :) :



  • Single item :(





#theList li:first-child:last-child{
list-style:none;
}