Shyam Vadeyar Shyam Vadeyar - 4 months ago 10
CSS Question

remove bullet in ul for only few items

I have a JSON similar to:

{
"qaset": [
{
"question": "question1",
"answer": [
"answer11",
"answer12"
]
},
{
"question": "question2",
"answer": "answer2"
},
{
"question": "question1",
"answer": [
"answer31",
"answer32"
]
}
]


I have an accordion, that displays the question part above and when individually clicked opens up an answer. I am using ng-repeat to display the questions and the answers.

Now, the answers are ng-repeat on ul, li tags. Because of this, the questions that have only one answer are displayed against a bullet. How do I get rid of the bullet only for such single answer entries (i.e. answer2 above).

Answer
li:only-child {
    list-style: none
}

Pure css.

EDIT Thanks @Michael Parker, you're right. The pseudo-selector :only-child target element who is the only-child of his parent. While li targets all li, :only-child will restrict to all li who are only child of their parents.

Note than it will works for all only-child's li in all HTML. To restrict, use

.any-class li:only-child {
    list-style: none;
}