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

Is there a way to style the numbers generated by an

without
changing the
1. contents? I'm finding that styling the
2. styles
   the number also. I would like to make the number be larger, bolder,
   and a different color than the actual content.

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

Scripsit Aaron Beall:

> Is there a way to style the numbers generated by an

without
> changing the
1. contents?
   
   It depends on what you mean by changing the
2. 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.
   
   
3. ...


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
markup inside

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

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

element (or the
1. elements) and override them for the list item
   contents, using the auxiliary
   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; }
   
   --
   Jukka K. Korpela ("Yucca")
   http://www.cs.tut.fi/~jkorpela/

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

Cheers, that will do it! Thanks.

On Sep 14, 2:50 pm, "Jukka K. Korpela" wrote:
> Scripsit Aaron Beall:
>
> > Is there a way to style the numbers generated by an

without
> > changing the
1. contents?
   >
   > It depends on what you mean by changing the
2. 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.
   >
   >
3. ...

>
> 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
markup inside

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

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

element (or the
1. elements) and override them for the list item
   > contents, using the auxiliary
   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; }
   >
   > --
   > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/