Hi All,

OK I'm stumped on a really stupid problem. I must be misunderstanding the rules of Specificity.

Given HTML:
....
<input class="left_Input_Field" id="gender" type="text" name="gender"/>
.....

CSS

.left_Input_Field#gender{
: declarations
}

fails

CSS

input#gender{
: declarations
}

works and successfully inherits from .left_Input_Field.

Whereas:

Given HTML:
....
<a class="header_Row" id="header1">Header</a>
.....

CSS

.header_Row#header1{
: declarations
}

works


Question:

Whilst the CSS work just fine I am a bit baffled why the CSS

.left_Input_Field#gender{
: declarations
}

doesn't work which suggests that I am failing to fully understand the cascade. I am missing something here is it with regard to the <input> tag as opposed to <a> or indeed any other tag. I only get this issue on <input>.

Thanks