<li> Tag Examples
Examples of the li
tag in HTML 5
"To Do" list with deleted and completed items
(see <li> tag demo above)
<div> <style scoped="scoped"> ul.li-del-demo li.complete, ul.li-del-demo li del { text-decoration: line-through; } ul.li-del-demo li { list-style-type: circle; } ul.li-del-demo li.complete { list-style-type: disc; } ul.li-del-demo li del { display: inherit; } </style> <style scoped="scoped" title="Show deleted items"> ul.li-del-demo li.deleted { display: list-item; } </style> <style scoped="scoped" title="Hide deleted items"> ul.li-del-demo li.deleted { display: none; } </style> <ul class="li-del-demo"> <li class="deleted"><del>This item was deleted</del></li> <li class="complete">This item was completed</li> <li>This item will be done later</li> </ul> </div>
The list uses a filled bullet for completed items and a white bullet otherwise. The display: inherit
for the del element overrides the default, which is display: none
. The selector for the style that hides deleted list items cannot be based on the presence of the del element because CSS context selectors can only reference an element's ancestors, and conditional selectors can only reference attributes, not child elements. (This is to avoid the possibility of circular references in CSS selectors.) Therefore, the display: none
style must be based on an attribute of the <li> tag, namely the class
attribute in the example.