2

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!

Improve this question
2
  • 2
    What's your actual problem, and why aren't you just using an ordered list? Commented Sep 21, 2013 at 21:15
  • You can't style a parent on the basis of a child in CSS. I think you can with Javascript but that might be more effort than its worth. Try adding a special class to each LI and that has a sub ordered list. Commented Sep 21, 2013 at 21:19

4 Answers 4

Reset to default
5

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

The jsfiddle rendering has “0.” as the item number for all the items in Firefox.
In the first jsfiddle, it is essential that there is a left margin set, too. Without left margin or padding, there is no room for the numbers, so they won’t appear.
note (jsfiddle) that the "opposte" operation works in both Firefox and Chrome, i.e. styling an li with "display: block" will hide the number and not increment the native counter...this is what I was looking for, so might help someone else too!
The first approach confirmed still not working in Firefox 51
0

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.

Improve this answer

4 Comments

What is the motivation behind other display types, e.g. replacing table/tr/td with display equivalents? I agree in principle that predefined tags for your exact purpose should be preferred. Was it just that tables in particular needed this treatment? I appreciate the argument that pseudo-li would need a different prefix for each instance within a pseudo-ol, however, each li within an ol does get a different prefix by some mechanism, right?
Making your HTML closer reflect the intent by using the right tags makes things like screen reader experience much better.
That's what I would have thought, yeah, but the hate for tables is real, and the movement toward display-based formatting seems pretty popular, so I don't really know what to think. I'm happy to use predefined elements, especially when it comes to tables.
@JohnP it's because they're wrong. There are instances where the numbering in a list is not semantic but actually just styling, and thus you should absolutely not use the html elements for it. Example. Implementing something like this using real uls would be horrible for screenreaders. Like with tables, if you're only wanting the layout, use css, if your data is actually tabular, then use the elements. There is no "always use X never use Y"
-1

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.

Improve this answer

Comments

-1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.