CODEWITHSUNDEEP
htmlcsscss-selectors
tingytong
tingytong

Reputation: 67

How can I select the first paragraph in this code?

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>

Upvotes: 1

Views: 142

Answers (2)

codeee
codeee

Reputation: 397

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 */ }

Upvotes: 0

swestfall
swestfall

Reputation: 411

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 */ }

Upvotes: 5

Related Questions