Changing style of the numbers in a CSS <ol> without changing the style of the <li>

[Aaron Beall]

Is there a way to style the numbers generated by an <ol> without
changing the <li> contents? I'm finding that styling the <li> styles
the number also. I would like to make the number be larger, bolder,
and a different color than the actual content.

 

[Jukka K. Korpela]

Scripsit Aaron Beall:

Is there a way to style the numbers generated by an <ol> without
changing the <li> contents?

It depends on what you mean by changing the <li> contents. You would need to
add markup there, but you need not change the textual content. Basically,
you need to wrap the list item content inside an extra container, e.g.

<li><div>...</div></li>

Then you can say e.g.

ol { font-size: 200%; }
ol li div { font-size: 50%; }

This makes the font in the numbers twice as big as copy text font size,
without affecting the list item contents font size.

This postulates that you use <div> markup inside <li> elements for this
"wrapper" purpose only. If this is not the case, you need to add class
attributes and use a class selector, in practice.

I'm finding that styling the <li> styles
the number also. I would like to make the number be larger, bolder,
and a different color than the actual content.

In the approach described above, you would set the stylistic features for
the <ol> element (or the <li> elements) and override them for the list item
contents, using the auxiliary <div> content. For example,

ol { font-size: 200%;
font-weight: bold;
color: #900;
background: white; }
ol li div { font-size: 50%;
font-weight: normal;
color: black;
background: white; }

 

[Aaron Beall]

Cheers, that will do it! Thanks.

Scripsit Aaron Beall:


It depends on what you mean by changing the <li> contents. You would need to
add markup there, but you need not change the textual content. Basically,
you need to wrap the list item content inside an extra container, e.g.

<li><div>...</div></li>

Then you can say e.g.

ol { font-size: 200%; }
ol li div { font-size: 50%; }

This makes the font in the numbers twice as big as copy text font size,
without affecting the list item contents font size.

This postulates that you use <div> markup inside <li> elements for this
"wrapper" purpose only. If this is not the case, you need to add class
attributes and use a class selector, in practice.


In the approach described above, you would set the stylistic features for
the <ol> element (or the <li> elements) and override them for the list item
contents, using the auxiliary <div> content. For example,

ol { font-size: 200%;
font-weight: bold;
color: #900;
background: white; }
ol li div { font-size: 50%;
font-weight: normal;
color: black;
background: white; }