CSS style priority confusion

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.