SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Can I Format Just the Number of an <li> tag?

    Can somebody tell me how I can format just the number and/or first line of an <li>? For example, I would like to change the color and weight of the number and first line of this:

    1. Heading

    stuff

    When I add this to the li tag, it changes the entire text within the tags. Is there a way to do this just to the number or first line?

    li {
    font-weight: bold;
    color: #FF0000;
    }
    John Saunders

  2. #2
    SitePoint Enthusiast blakems's Avatar
    Join Date
    Oct 2002
    Location
    Utah
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JohnSaunders
    Can somebody tell me how I can format just the number and/or first line of an <li>? For example, I would like to change the color and weight of the number and first line of this:

    1. Heading

    stuff

    When I add this to the li tag, it changes the entire text within the tags. Is there a way to do this just to the number or first line?

    li {
    font-weight: bold;
    color: #FF0000;
    }

    Try this by using a span in the li

    <style type="text/css">
    li{
    color : Aqua;
    }
    .c {color: #900;
    }
    </style>

    <ol>
    <li><span class="c">safasdf</span></li>
    </ol>
    blakems.com
    "reaching more of your brain cells"


  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You can change the format of the first line with CSS2:
    Code:
    li {
      color: blue;
    }
    li:first-line {
      color: red;
    }
    This will make everything on the first line red, but any line after the first will be blue. The only problem with this approach though, is that IE/Windows still doesn't support it. You can test my code in Mozilla, Opera and IE/Mac though, and it should work.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •