Make first letter of the paragraph larger

Question

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.

</header>

     <article>
        <h2>About the Course</h2>
        <p>
           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:
        </p>
        <ul>

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!

Answer 1

The paragraph isn't a descendant of the <h2>, 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.

Answer 2

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