CODEWITHSUNDEEP
htmlcss
anonymouse
anonymouse

Reputation: 639

Using CSS to display items as ordered list

I'm very confused about how to display things as lists is css. I see that there is an option to display an element as a list-item, but how can I specify that the parent is supposed to be an ordered list?

For example:

<style>
  .list_item{
    display:list-item;
  }
  .ordered_lit{
    display:???;
  }
</style>
<div class="ordered_list">
  <div class="list_item"></div>
  <div class="list_item"></div>
</div>

Thanks!

Upvotes: 2

Views: 5853

Answers (4)

David Thomas
David Thomas

Reputation: 253308

You don't need to specify the parent's display property, just specify the list-style-type (which will take care of displaying the counter, which I suspect is the problem you're trying to solve) in the CSS for the 'list-item' elements:

div.counter {
    display: list-item;
    list-style-type: decimal;
}

The above CSS works with the HTML:

<div>
    <div class="counter"></div>
    <!-- identical elements removed for brevity -->
    <div class="counter"></div>
</div>

JS Fiddle demo (confirmed working in Chromium 28/Ubuntu 12.10, not working in Firefox, apparently).

If you only need to support those browsers that are able to work with pseudo-elements, then you have the option of using CSS-generated counters:

div.parent {
    counter-reset: pseudoListNumbering;
}

div.counter::before {
    counter-increment: pseudoListNumbering;
    content: counter(pseudoListNumbering, decimal-leading-zero);
}

JS Fiddle demo.

References:

Upvotes: 5

Mamuz
Mamuz

Reputation: 1730

Css display value 'list-item' is only a behaviour like a li-element: insert a bullet before content and insert a break after element. There is no css display value for a numerical or alphabetical listing.

Upvotes: -1

Mooseman
Mooseman

Reputation: 18891

There is no value for display to generate an ordered list. See the spec: http://dev.w3.org/csswg/css-display-3/#display

Because the unordered list requires no count, every element is prepended with the same content.

Upvotes: -1

MarcinJuraszek
MarcinJuraszek

Reputation: 125620

how can I specify that the parent is supposed to be an ordered list?

Simple answer: You can't. There is no special display value to specify a parent for list-item elements.

And by the way: you really should use proper HTML tags for the case: ul/ol instead of divs. Why? Because otherwise you'll have to remember about things like margin/padding by yourself. With ul/ol browsers do this out of the box. Check DEMO for sample problem you can face.

Upvotes: 0

Related Questions