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!

Just put the first character in a `` of a class with the correct style? Too simple? — Nick, Feb 19 '14 at 22:19
No ``s are needed - the `:first-letter` part of the selector is fine, it's just the bit with the `h2` and the `p` in it — Bojangles, Feb 19 '14 at 22:21

score 11 · Accepted Answer · edited May 23 '17 at 12:33

11

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.

edited May 23 '17 at 12:33

Community

1
1

answered Feb 19 '14 at 22:18

Bojangles

99,427
50
170
208

Got it. I appreciate your answer and explanation. So what element p is descendant of? Article? body? – Modaresi Feb 19 '14 at 22:31
`
`, because it's between the open and close of that tag
– Bojangles Feb 20 '14 at 06:24

score 3 · Answer 2 · answered Feb 19 '14 at 22:19

3

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

answered Feb 19 '14 at 22:19

user1234564

73
3

Make first letter of the paragraph larger

2 Answers2