CSS style priority confusion

Question

CSS

.wrapper > * {
    background: deepskyblue;
}

.item {
    background: deeppink;
}

HTML

<div class="wrapper">
  <div class="item">
    Test
  </div>
</div>

Above is my CSS class and HTML. So since I have gave style for .item class below the wrapper > * here.

But the item's background is still getting deepskyblue.

Should it be deeppink?

I know I can use !important in .item to get it deeppink but why is this happening in this order is what I want to know.

The code you provided renders a `deeppink` background: https://jsfiddle.net/qxvttLyh/ — chazsolo, Aug 09 '17 at 14:54
Check this link http://ccm.net/faq/30797-css-priority-rules-weight and you will know how weights are calculated — demo, Aug 09 '17 at 14:57
There must be other selectors affecting the values. Try to inspect the result with your browser's developer tools (usually `F12` key), to see what affects it... — Usagi Miyamoto, Aug 09 '17 at 14:57
@chazsolo that is even bigger problem then. In jsfiddle it seems to work. I am using it in a component is Angularv4 messing it up? please see the attached screenshot in my question. — Prajeet Shrestha, Aug 09 '17 at 14:59
Attribute selectors add specificity to your rule. The `*` selector has no weight at all, but with the addition of `[_ngcontent-c1]` it does, so that's why it's overriding the less-specific rule — chazsolo, Aug 09 '17 at 15:03
So it's auto-generated by AngularV4 itself anyway to override it? — Prajeet Shrestha, Aug 09 '17 at 15:05
Of course, you just need a more specific rule. If you don't want to get rid of `.wrapper[_ngcontent-c1] > *[_ngcontent-c1]` then use `.wrapper[_ngcontent-c1] > .item[_ngcontent-c1]` — chazsolo, Aug 09 '17 at 15:07
That would be quite an effort since I just shortened the code for brevity. But my actual implementation will have multiple elements with different tags inside main wrapper. Any shortcuts? — Prajeet Shrestha, Aug 09 '17 at 15:09
Shortcuts? No... simply _write a more specific rule_ and avoid `!important` unless there is absolutely no other way. I'll put together an answer for you. — chazsolo, Aug 09 '17 at 15:10

score 1 · Accepted Answer · answered Aug 09 '17 at 15:17

To understand why you aren't seeing the result you want, you need to first understand CSS Specificity and what weight selectors have (which is too long of a discussion as an answer to this question).

First, your original set of rules:

.wrapper > * { // [0,0,0,1,0]
  background: deepskyblue;
}

.item { // [0,0,0,1,0]
  background: deeppink;
}

Both of these rules have a specificity of [0,0,0,1,0] because of the single class within each selector. The * selector has a weight of 0, so it does not add any weight to the first rule. Since both rules affect the same property on the same element, the rule that comes last wins: in this case, background: deeppink;

However, your actual rules are different:

.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
  background: deepskyblue;
}

.item[_ngcontent-c1] { // [0,0,0,2,0]
  background: deeppink;
}

In this case, the first rule wins because it is more specific. Attribute selectors have a weight of [0,0,0,1,0].

To remedy this, you have to make a selector that equals or surpasses the specificity of the rule to be overridden.

For example:

.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
  background: deepskyblue;
}

.wrapper[_ngcontent-c1] > .item[_ngcontent-c1] { // [0,0,0,4,0]
  background: deeppink;
}

I read about css specifity rules so it goes like [ Style attribute, ID, Class-Pseudo Class attribute, Element ], so [0,0,0,0] whats why is there 5 0 in your specifity calculation? — Prajeet Shrestha, Aug 09 '17 at 16:12
I've seen in the past some examples with 5, denoting a rule with `!important` as adding `[1,0,0,0,0]` to the specificity, just as a visual. I got used to writing it that way. — chazsolo, Aug 09 '17 at 16:16

CSS style priority confusion

1 Answers1