How can I target the second <p> within the second <div> using CSS?
Is there a way to create a hierarchy with CSS selectors?
Please see the code snippet below:
<!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>