CODEWITHSUNDEEP
htmlcsscss-selectors
Vineet
Vineet

Reputation: 1

How to select a only a paticular P tag inside div tag hierarchically

How to select the only 2nd <p> of 2nd <div>tag?

Is there any hierarchy we can associate in CSS tags ?

Below is code:

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(2) {
background: #ff0000;
}    
</style>
</head>
<body>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>

</body>
</html>

Upvotes: 0

Views: 3950

Answers (3)

pavel
pavel

Reputation: 27072

Regarding the widest browser support you can use + selector combined with :first-child.

div + div p:first-child + p {color: red;}

https://jsfiddle.net/vkm2zuaq/

OR using :nth-child:

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

https://jsfiddle.net/vkm2zuaq/1/

Upvotes: 4

moeses
moeses

Reputation: 507

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

also check out this Post by Chris Coyer - it covers all answers to this topic:

CSS Tricks - how nth work

Upvotes: 0

Vikram
Vikram

Reputation: 3361

nth-child will do the job, try following code

div:nth-child(2) p:nth-child(2){
   /*---- css code-------*/
}

Upvotes: 0

Related Questions