Why isn't applied CSS selector

Question

.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 applied??? It's applied when I changed it(p.blue). I don`t know the difference between first case and second case ..

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Musa, Jun 02 '20 at 16:32
`.colored p` has a greater specificity than `.blue` and overrides it — j08691, Jun 02 '20 at 16:33

score 0 · Answer 1 · answered Jun 02 '20 at 19:33

What is happening in second case is, p tag have parent class colored and that is why it is applying css of parent class to second p tag. Even though you have provided class blue but still parent class have high precedence.

You can use !important override precedence for color property in class blue. The !important instruction has the highest precedence of all precedence factors.

.colored p{
   color: red;
}


article > .colored{
   color:powderblue;
}

.blue{
   color: green!important;
}

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

Thanks you. You made me understand :) – Wonjae Jun 03 '20 at 16:40 — Wonjae, Jun 03 '20 at 16:40

Why isn't applied CSS selector

1 Answers1