SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: pseudo first-letter styling links

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pseudo first-letter styling links

    Hi guys and gals,

    I am wanting to spruce up my site navigation a bit,
    For some reason first-letter does not work on my a elements

    #top a:first-letter
    {
    color:red;
    }

    basically, for every link in the #top div I want the first letter to be red.
    Has anyone any ideas as to why this isn't working, or a possible solution?

    Cheers,

    Kiel

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the site?

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No sorry, its down while i'm setting up the database and cms,
    I can however post any required markup

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,773
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    The first-letter applies to the first character of the first formatted line of a block level element. It does not apply to inner elements such as anchors on indeed inline elements.

    You would need to do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    p:first-letter {
        color:red;
    }
    </style>
    </head>
    <body>
    <p><a href="#">Test</a></p>
    </body>
    </html>

Tags for this Thread

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
  •