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;}
Comments
Post a Comment