.colored p{
color: red;
}
article > .colored{
color:powderblue;
}
.blue{
color: white;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="colored">
<p>hello</p>
<p class="blue">hello</p>
<div>
<p>hello</p>
</div>
</div>
<p>hello</p>
<article>
<div class="colored">hello</div>
</article>
</body>
</html>Why isn't the blue selector working as intended? It works when I change it to (p.blue). The difference between the first case and the second case is unclear to me...