Grow your CSS skills. Land your dream job.

[Solved] :first-letter of only one paragraph

  • # March 12, 2010 at 8:46 am

    Hello everyone,

    I am trying to make one of those snazzy drop caps for my sidebar column, but I find it tricky to get it to look the way I want.

    p:first-letter kind of does the trick but instead of targeting all the first letters of paragraphs, I would like only the very first one to be larger. This is what my html looks like:

    Code:

    My column

    Lorem ipsum…

    Lorem ipsum…

    Is there a way to target the first letter of my first text paragraph?
    I know the code is pretty stupid with the p wrapping the image, but it’s WordPress generated and the person who is going to use is doesn’t know html so I would like to find a way without having to edit the code every time the column is updated.

    Any ideas?

    Emma

    # March 12, 2010 at 3:28 pm
    Code:
    .column p:first-child:first-letter
    # March 12, 2010 at 3:29 pm

    or since the second paragraph looks like the first "text" paragraph:

    Code:
    .column p:nth-child(2):first-letter
    # March 12, 2010 at 5:13 pm

    Ah, it’s almost too simple! Thanks Chris.

    I also want you to let you know how wonderfully educational and helpful this site is, I really can’t thank you enough. You probably hear it a lot but here is another boost for your ego :) I am very impressed with your effort to help people and share your knowledge. Keep it up!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".