8

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>

Yamiko
  • 4,605
  • 4
  • 26
  • 48

4 Answers4

7

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.

Niet the Dark Absol
  • 301,028
  • 70
  • 427
  • 540
  • 2
    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. – Jukka K. Korpela Jul 28 '13 at 04:59
  • 1
    It's the only child of its list item in the question, whereas here it's a sibling inside the preceding list item. – Niet the Dark Absol Jul 28 '13 at 05:00
5

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.
Community
  • 1
  • 1
Jukka K. Korpela
  • 178,198
  • 33
  • 241
  • 350
4

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";
Dave Chen
  • 10,617
  • 8
  • 35
  • 67
-2

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 &ltli>List item&lt/li>, you could instead just write &ltli>List item...

Omitting optional tags keeps your HTML formally valid...
Jay Harris
  • 4,033
  • 15
  • 21
  • Is this considered valid html? – Yamiko Jul 28 '13 at 03:54
  • not sure i can check. it's a hack just like clear floats and all of the other html hacks – Jay Harris Jul 28 '13 at 03:56
  • 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? – Jay Harris Jul 28 '13 at 04:06
  • It is not valid, and it means changing the markup. The question seems to be how to achieve certain styling with the given markup. – Jukka K. Korpela Jul 28 '13 at 05:00
  • 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. – Jukka K. Korpela Jul 28 '13 at 05:58