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


how select 2nd <p> of 2nd <div>tag?

is there hierarchy can associate in css tags ?

below 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> 

regarding widest browser support can use + selector combined :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/


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -