Overriding properties in CSS

Question

#iddiv span {
    display: inline-block;
    width: 190px;
}
.myclass {
    width:10px;
}

Then I have

<div id="iddiv">
    <span>hello:</span> 
    <span class="myclass">yeah</span> <br/>
</div>

I would like the first span's width to be 190px, and second's to be 10px. But both are 190px: why it's not overriding the width propoerty?

EDIT: Thanks for your responses. What about unsetting width? I don't want 10px width, just default width as if it was undefined

Answer 1

You could always use the !important flag to override:

.myclass {
    width: 10px !important;
}

Answer 2

Because id+selector (#iddiv span) is more specific than a class. Either

#iddiv span.myclass

or

#iddiv .myclass

should work for this case.

Learn more about CSS specificity here or by Googling it.