CODEWITHSUNDEEP
css
Hunali
Hunali

Reputation: 277

Selecting specific element

guys, I don't know how to select a specific selector of class/id if I have many Paragraphs and I just want to select a specific one how I'm supposed to do that. For example, if I want to select the second Paragraph how I'm supposed to that? <p>World</p> Can I somehow just select that or I need to add another class.

Example:

HTML:

<div class="class">
   <p>Hello</p>
   <p>World</p>
</div>

How can I select the second paragraph <p>World</p>

Upvotes: 2

Views: 211

Answers (4)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You can either use the nth-child() or last-child() to select the <p>World</p> element.

.class p:nth-child(2) {
  color: red;
}

.class1 p:last-child {
  color: green;
}
<div class="class">
  <p>Hello</p>
  <p>World</p>
</div>

<div class="class1">
  <p>Hello</p>
  <p>World</p>
</div>

Upvotes: 1

Marcos Rivas
Marcos Rivas

Reputation: 49

You can use :nth-child() selector to select the nth element

This selects the second paragraph

.class p:nth-child(2){
  /* properties */
}

Upvotes: 2

Baldr&#225;ni
Baldr&#225;ni

Reputation: 5640

Have a look at pseudo-class selector :nth-of-type()

In this case you just have to do .class > div:nth-of-type(2)

.class > p:nth-of-type(2) {
  background-color: red
}
<div class="class">
   <p>Hello</p>
   <p>World</p>
</div>

Upvotes: 3

Mahir Yıldızhan
Mahir Yıldızhan

Reputation: 63

Id's are uniq for elements. If you define an id, you can use that. HTML

<div class="class">
   <p id="hello">Hello</p>
   <p id="world">World</p>
</div>

CSS

#hello {
 css attributes..
}
#world {
 css attributes..
}

Upvotes: 2

Related Questions