What specificity does [class$=" "] and [id*=" "] hold?

Question

[class$=" "]
[class*=" "]
[class^=" "]

All of the above (and the ID equivalents) do not seem to follow the standard CSS specificity weight rules.

I made a Codepen to show how odd and conflicting they are. http://codepen.io/mildrenben/pen/myYLmG

Markup

<div id="wrap">
  <div class="container">
    <p> #idName is more specific than [id*="idName"]. But .className and [class*="className"] seem to be the same specificty.</p>
  </div>
</div>

CSS

#wrap {
  border: solid 5px green;
}

[id*="wrap"] {
  border: solid 5px red;
}

.container {
  background: red;
}

[class*="container"] {
  background: yellow;
}

p {
  font-family: sans-serif;
  padding: 6px;
}

Could anyone please clarify the weights of specificity these selectors hold?

Thanks

Answer 1

#idName is more specific than [id*="idName"]. But .className and [class*="className"] seem to be the same specificty.

Yes. That is what the spec says they should be.

count the number of ID selectors in the selector (= a)

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

You have an id selector, two attribute selectors, a class selector and a type selector.