Removing double bullets in a nested list

The nested list contains double cartridges. One for li and one 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> 

+6
source share
4 answers

You cannot do this only in an external stylesheet (I suppose you want to). The reason is that there is no selector in CSS that takes those li elements that have the ul element as their first child. So your options (besides waiting indefinitely until CSS is the parent selector "...):

  • Add class to such li elements and use the class selector. This is usually the preferred method.
  • Use JavaScript that recognizes such li elements and processes them, for example. adding a class to them.
  • Use inline CSS i.e. style attribute in these li elements.
+5
source

A nested list must be a child of one of the list items, for example:

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

This is valid HTML.

+6
source

Could you use 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 can be done through the LI list and add style by defining 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"; 
+3
source

quick hack: remove the list item:

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

if you do not close the tags, the browser will display them correctly, that is, without an additional bullet. Note: this is valid html since you do not need to close <li> tags.

JSFIDDLE with both examples

source: google

", unlike XHTML, even when delivered with text such as MIME / html - allows authors to omit certain tags."

from google:

if you have a list of items marked as & ltli> List item & lt / li> instead, you can simply write & ltli> List item ...

Omitting optional tags keeps your HTML formally valid ...
-2
source

Source: https://habr.com/ru/post/950444/


All Articles