Specificity confusion

HTML & CSS
1

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

2

[font=verdana]Just so I can check what you mean by “fails” and “doesn’t work” … what exactly is not happening that you think should be happening?

When I try using <input class=“class1” id=“id2”> and style it with [color=#0000aa].class1#id2 {border:1px blue solid;}[/color], I get a text field with a blue border as I expected.[/font]

3

Hi Stevie D,

I think I got the selector completely confused. My bad. I was looking for the descendent therefore should have had a space.

Went crossed eyed looking for it. But pretty sure that was the problem.

Rgds