Remove double bullets in nested list

Question

Nested list have double bullets. One for the li and another for the child list.

example

    <ul>
        <li>item</li>
        <li>item</li>
        <li>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </li>
    </ul>

Azoth

Answer 1

You can’t do this just in an external style sheet (as I presume you would want to). The reason is that there is no selector in CSS that would pick up those li elements that have a ul element as the first child. So your options are (apart from waiting indefinitely until CSS has a “parent selector”...):

• Add class to such li elements and use a class selector. This is normally the preferred way.
• Use JavaScript that recognizes such li elements and handles them, e.g. adding a class to them.
• Use inline CSS, i.e. style attribute in those li elements.

Damalis

Answer 2

Would you mind if I used styles? Updated

Code:

<ul>
    <li>item</li>
    <li>item</li>
    <li style="list-style:none">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </li>
</ul>
<ol>
    <li>item</li>
    <li>item</li>
    <li style="list-style:none">
        <ol>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ol>
    </li>
</ol>

Another method might be running through the list of LI and adding the style by detecting child nodes. Example

Code (HTML is the same):

var li = document.getElementsByTagName("li");
    
for (var i=0, max=li.length; i < max; i++)
    if (li[i].childNodes.length > 1)
        li[i].style.listStyle = "none";

Holliholliday

No I want to do it in my css sheet but if its not possible i can use a class. – Azoth

Answer 3

The nested list should be a child of one of the list items, like so:

<ul>
  <li>item</li>
  <li>item
    <ul>
      <li>item</li>
    </ul>
  </li>
</ul>

This is valid HTML.

Lukelukens

The nested list is a child of a list item in the question, too. This answer does not address the question how to remove one of the bullets when the markup is as in the question. – Damalis

It's the only child of its list item in the question, whereas here it's a sibling inside the preceding list item. – Lukelukens

I think semantically this makes more sense too as the nested ul should be a child of the list item it is indented under. – Where

Answer 4

In modern CSS, you can use the has-selector like this:

ul li:has(ul),
ol li:has(ol) {
   list-style: none;
}

Just be mindful that this isn't fully supported in all browsers yet, but coverage is pretty decent right now according to Caniuse (86.19% coverage at time of writing).

Langton

Answer 5

This is the perfect solution I got, which is able to remove all level nested list styles.

    <ul>
        <li>level 1</li>
        <li>level 1</li>
        <li>level 1
            <ul>
                <li>level 2</li>
                <li>level 2
                    <ul>
                        <li>level 3</li>
                        <li>level 3</li>
                        <li>level 3</li>
                        <li>level 3
                            <ul>
                                <li>level 4</li>
                                <li>level 4</li>
                                <li>level 4</li>
                            </ul>
                        </li>
                        <li>level 3</li>
                    </ul>
                </li>
                <li>level 2</li>
                <li>level 2</li>
            </ul>
        </li>
        <li>level 1</li>
    </ul>

// remove list style in multilevel
var list = document.getElementsByTagName('li');

for (var i=0, max=list.length; i<max; i++){
    if(list[i].childNodes.length)
        list[i].style.listStyle = "none";
}

Ocotillo

Answer 6

quick hack: remove the list item:

<ul>
    <li>item
    <li>item
    <ul>
         <li>item
         <li>item
         <li>item
    </ul>
</ul>

if you don't close the tags the browser will render it correctly, that is without the extra bullet. Note: this is valid html since you don't need to close <li> tags.

JSFIDDLE with both examples

source: Google

"as opposed to XHTML, even when delivered with the MIME type text/html – allows authors to omit certain tags."

from google:

if you have a list of items marked up as <li>List item</li>, you could instead just write <li>List item...

Omitting optional tags keeps your HTML formally valid...

Knapsack

Is this considered valid html? – Azoth

not sure i can check. it's a hack just like clear floats and all of the other html hacks – Knapsack

really? making the browser calculate floated elements height and width by setting overflow hidden or adding an element with clear both as an attribute. that's not a hack? – Knapsack

It is not valid, and it means changing the markup. The question seems to be how to achieve certain styling with the given markup. – Damalis

I misread the markup in the answer because it was oddly formatted (indentation does not correspond to element nesting), sorry. Still, this is not an answer to the question how to prevent double bullets when the markup given in the question is used. – Damalis