the nav element and the list provide different semantical information: The nav element communicates that we’re dealing with a major navigation block The list communicates that the links inside this navigation block form a list of items At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose. So yes, having a list … Read more
Yes it is valid according to xhtml1-strict.dtd. The following XHTML passes the validation: <?xml version=”1.0″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Test</title> </head> <body> <ul> <li><div>test</div></li> </ul> </body> </html>
This works for any number of lists: it basically gathers all lis in uls that have your attribute, sorts them according to their data-* attribute value and re-appends them to their parent. Array.from(document.querySelectorAll(“ul > li[data-azsort]”)) .sort(({dataset: {azsort: a}}, {dataset: {azsort: b}}) => a.localeCompare(b)) // To reverse it, use `b.localeCompare(a)`. .forEach((item) => item.parentNode.appendChild(item)); <ul> <li data-azsort=”skeetjon”> … Read more
If you need the functionality to start an ordered list (OL) at a specific point, you’ll have to specify your doctype as HTML 5; which is: <!doctype html> With that doctype, it is valid to set a start attribute on an ordered list. Such as: <ol start=”6″> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol>
There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class. ul { margin: 0; } ul.dashed { list-style-type: none; } ul.dashed > li { text-indent: -5px; } ul.dashed > li:before { content: “-“; text-indent: -5px; } Some text <ul class=”dashed”> <li>First</li> <li>Second</li> <li>Third</li> </ul> <ul> <li>First</li> <li>Second</li> <li>Third</li> … Read more
ul { display: table; margin: 0 auto; } <html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html>
Uncheck “normalize CSS” – http://jsfiddle.net/qGCUk/3/ The CSS reset used in that defaults all list margins and paddings to 0 UPDATE http://jsfiddle.net/qGCUk/4/ – you have to include your sub-lists in your main <li> ol { counter-reset: item } li { display: block } li:before { content: counters(item, “.”) ” “; counter-increment: item } <ol> <li>one</li> <li>two … Read more
You may just use the attribute start as a filter : ol[start=”10″] { counter-reset: lis 9; } Demo , but this will only apply for this ol attribute. You would need some javaScript in order to retrieve attribute value to apply, generate the correct counter-reset. <ins data-extra=”Use of Scss”> see this : DEMO to generate … Read more
I’m using ideas that @Spudley has in his answer, and I’m using ideas from a previous answer I wrote: How to use CSS to surround a number with a circle? See: http://jsfiddle.net/j2gK8/ IE8 does not support border-radius, and workarounds like CSS3 PIE do not work with :before. And, older browsers like IE7 do not support … Read more
The bullet gets its color from the text. So if you want to have a different color bullet than text in your list you’ll have to add some markup. Wrap the list text in a span: <ul> <li><span>item #1</span></li> <li><span>item #2</span></li> <li><span>item #3</span></li> </ul> Then modify your style rules slightly: li { color: red; /* … Read more