Css rule priority issue

Question

I have following code:

.wrap .sel{
  background-color: red;
}
.sel{
  background-color: blue;
}
select{
  background-color: yellow;
}

<div class='wrap'>
  <select class='sel'>
    <option>CSS</option>
    <option>JS</option>
   </select> 
<div>

Why always the color get RED, even if I changing the rule's order in CSS section?

Thanks !

EDIT: I know how to work with !important, I just asked this question to find out, how browser select the css rule.

Answer 1

the select .wrap .sel is more specific than .sel so it overrides .sel color definition. same for select selector. if you want them to override, you should make them more specific or add !important like "blue !important;"