Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make first letter of the paragraph larger

Make first letter of the paragraph larger

Problem

I am working on my HTML assignment. It is basic CSS stuff (external style sheet) and I am almost done. Everything is working the way it should except one part which I cannot figure out why.



     
        

About the Course

The Civil War and Reconstruction explores the causes and consequences of the American Civil War, covering American history from 1840 through 1876 in great detail. My primary goal is to interpret the multiple threads that run through this epic event and consider how these threads still engage the politics and culture of the present day. In this course we will rely heavily on primary texts, interpreting the events of the day through the words of those men and women who experienced it. We'll examine four main points of interest:

    So out of 21 requirements for this assignment #15 is:

    For the first paragraph after the h2 heading within the Article element, create a style rule to display the first letter with a font size of 32 pixels.

    So I did it this way:

    article h2 p:first-of-type:first-letter {
    font-size: 32px;
    }
    

    That didn't work, so I changed it to:

    article > h2 p:first-of-type:first-letter {
     font-size: 32px;
    }
    

    and still it doesn't work!

    Problem courtesy of: Modaresi

    Solution

    The paragraph isn't a descendant of the

    , but is after it. Change your CSS to this:

    article h2 + p:first-letter {
        font-size: 32px;
    }
    

    The + (adjacent sibling) selector will select the first p element directly after the h2. There is a good StackOverflow answer explaining this in further detail here.

    Additionally, you don't need :first-of-type pseudo selector either as the + only selects the first element.

    Solution courtesy of: Bojangles

    Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Make first letter of the paragraph larger

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×