case on css specificity

Question

I have html like:

header {
  width: 100%;
  height: 50px;
}

a {
  color: red;
}

.my-a {
  color: green;
}

<header class="my-header">
  <div>
    <a class="my-a" href="https://www.google.com">clickme</a>
  </div>
</header>

Then 'clickme' will be green as expected. And it follows the rule that class selectors has a greater specificity than type selectors.

But when css becomes:

header {
  width: 100%;
  height: 50px;
}

.my-header a {
  color: red;
}

.my-a {
  color: green;
}

<header class="my-header">
  <div>
    <a class="my-a" href="https://www.google.com">clickme</a>
  </div>
</header>

The result shows that 'clickme' is red which is out of my expectation. I cannot find any corresponding rule in MDN specificity.

Am i missing any rule here? JSFiddle

score 6 · Accepted Answer · answered Sep 28 '18 at 09:35

6

.my-header a is a type selector AND a class selector which is more specific than .my-a which is a class selector and nothing else.

answered Sep 28 '18 at 09:35

Quentin

I'm confused that MDN says that universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. What does it actually mean by saying combinators have no effect on specificity? – 39ecneret Sep 28 '18 at 10:04
@39ecneret — `.my-header a` / `.my-header + a` / `.my-header :not(a)` / `:not(.my-header) > a` — all have a class selector and a type selector and have the same specificity. The combinators don't change the specificity. Just the selectors. – Quentin Sep 28 '18 at 10:08

1 Answers1