Can\'t override css of element

Can\'t override css of element References I have a website with a global template that contains partial templates, but now I\'m stuck with a simple CSS problem: HTML

[Select a value]

Global CSS In a global stylesheet the default width for all elements inside #context is defined: div#context select { width: 500px; } Partial CSS Now for the partial template (which renders content inside #context), I need to override the default width of . I thought this would be as simple as: select#test { width: 150px; } But I was wrong, it doesn\'t work. And I guess it is because css thinks div#context select is a better match for the element, because it works when I change the partial template css like this: div#context select#test { width: 150px; } Of course, this is not what I want to do, because the partial template should not know in which node it is rendered inside the global template. Any ideas on how I can override the style for the partial template without specifying an element from the global template? See jsFiddle