Question

My css style sheet:

 * {vertical-align:top;}  
input.test {vertical-align:middle;}

This is an example of my html code:

<input class="test" /><input class="test" />

So I would like the class test to override *
I have tried:

* {vertical-align:top;}
input.test {vertical-align:middle!important;}

But it did not work on Firefox and the vertical-align is still on top…
Thank’s!

Answer 1

…but vertical-align, unfortunately, isn’t a property that applies to input elements.

!important in this context, is making no difference.
input.test, in fact, is already overriding *

Why that? It is a more specific selector, and CSS are all about specificity of selectors.
i.e. the rule with the most specific selector, wins.

Hence, to influence that input element appearance, you should target the td cell containing it and set that vertical-align value.