#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
You could always use the !important flag to override:
.myclass {
width: 10px !important;
}
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.
CSS applies styles according to the specificity of the selectors
#iddiv span is more specific than myclass. Changing it to #iddiv .myclass should fix the issue for you.
Here's an article that goes more in depth about this : http://htmldog.com/guides/cssadvanced/specificity/
Remember to use the keyword, !important, which functions to overwrite parent rules.
Also you can define your "myclass" in the following way:
#iddiv span.myclass {
width:10px;
}
It's not working because the first style is more specific.
To fix it, make sure you target the second span more directly, like this
#iddiv span.myclass
First of all, I'd suggest you properly target your selectors, as others are suggesting.
But when all else fails, you can use !important.
