How can I select the first paragraph in this code?

Question

Hi everyone,

I am new to coding and have a really simple question that I can't figure out. In the following code below, how can I select the first paragraph but NOT the second in CSS? I want to make some manipulation to the first pargraph only! I've tried nth-child(1) but it's not working. Please help!

<div class="about" id="about">
        <div class="container">
            <h1>Who Am I?</h1>
            <img src="images/MyFace.jpg">
            <p>paragraph1</p>
            <p>paragraph 2!</p>
        </div>

possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — TylerH, Jul 05 '14 at 03:51
I'm puzzled as to why you changed the accepted answer to the one that claims three solutions to work, two of which you yourself confirmed did not work after having tried them, and the third of which was already provided earlier in the answer you originally accepted. — BoltClock, Jul 07 '14 at 15:53

score 5 · Accepted Answer · edited Jul 05 '14 at 03:49

5

Using the CSS first-of-type selector. The below CSS will select only the first instance of element type p within the element with class container.

.container > p:first-of-type{ /* css */ }

edited Jul 05 '14 at 03:49

TylerH

20,799
66
75
101

answered Jul 05 '14 at 03:13

swestfall

411
3
6

score 0 · Answer 2 · answered Jul 05 '14 at 05:27

0

Please try below Code there are 3 way to select first element:

Solution 1:

.container p:first-child { /* your CSS */ }

Solution 2:

.container p:first-of-type { /* your CSS */ }

Solution 3:

.container p:nth-child(1) { /* your CSS */ }

answered Jul 05 '14 at 05:27

codeee

397
3
7

You obviously did not read the question or the answer that was provided more than 2 hours ago. – BoltClock Jul 05 '14 at 05:43

How can I select the first paragraph in this code?

2 Answers2