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

Discussion in 'HTML' started by Aaron Beall, Sep 14, 2007.

  1. Aaron Beall

    Aaron Beall Guest

    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.
     
    Aaron Beall, Sep 14, 2007
    #1
    1. Advertising

  2. 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; }

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 14, 2007
    #2
    1. Advertising

  3. Aaron Beall

    Aaron Beall Guest

    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 <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; }
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
     
    Aaron Beall, Sep 14, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Subra
    Replies:
    25
    Views:
    1,193
    user923005
    Mar 8, 2007
  2. Andrew Tatum

    Fibonacci Numbers and Lucas Numbers

    Andrew Tatum, May 26, 2007, in forum: C++
    Replies:
    6
    Views:
    565
    Howard
    May 27, 2007
  3. Lance Hoffmeyer
    Replies:
    2
    Views:
    524
    Lance Hoffmeyer
    Jul 26, 2007
  4. jko170
    Replies:
    9
    Views:
    126
    jko170
    Jan 21, 2009
  5. GIMME
    Replies:
    5
    Views:
    186
    Thomas 'PointedEars' Lahn
    Jul 26, 2004
Loading...

Share This Page