Why would the existence of a CSS rule cause another not to match?

Question

I've tried creating the following HTML file in Chrome:

<style>
br {
}

[required] {
  border-width: 3px;
  border-color: red;
}

</style>
<input required />

that is the complete content of the file. The [required] rule does not match and the <input> remains unstyled.

If the empty br rule is left out so that the file reads:

<style>

[required] {
  border-width: 3px;
  border-color: red;
}

</style>
<input required />

It works fine!

Why would the existence of the <br> rule before the [required] one cause [required] to not match?

Thanks. (It works fine is jsfiddle, you need to actually create the files.)

I don't see this behavior in jsFiddle: http://jsfiddle.net/xvcAL/ looks fine to me. Are you able to replicate somewhere we could see? — Elliot B., Aug 20 '12 at 23:19

matt3141 · Accepted Answer · 2012-08-20T23:39:40.730

2

Your new line is invalid somehow. The code performs as expected when they are removed.

I've traced the problem to right after the closing bracket for br. here's what I get in vim:

<style>
br {
}<200b>

[required] {
  border-width: 3px;
  border-color: red;
}

</style>
<input required />

Apparently <200b> is the Unicode zero width space. I am not familiar with this character and don't know why it would be present in this file. Deleting it resolves the issue.

edited Aug 20 '12 at 23:39

answered Aug 20 '12 at 23:21

matt3141

4,303
1
19
24

I've typed code from question into my editor, and created file. And I've got same problem as Adam. – Miljan Puzović Aug 20 '12 at 23:27
@MiljanPuzović I am aware that there is an issue and I have traced it down. The question is how this odd character got there to begin with. – matt3141 Aug 20 '12 at 23:43
That's so strange. I have no idea how that got there. Great catch! – Adam Aug 20 '12 at 23:46
@matt3141 You're right, i didn't get it before last edit of your answer. – Miljan Puzović Aug 21 '12 at 00:04
According to an answer to a question on [zero width space](http://stackoverflow.com/questions/7055600/u200b-zero-width-space-characters-in-my-js-code-where-did-they-came-from), it may have been generated by Chrome Inspector. – Jukka K. Korpela Aug 21 '12 at 04:09

score -1 · Answer 2 · answered Aug 20 '12 at 23:18

-1

i think that the br is helping trick the browser - because their are more brackets...

i think you are missing something...

.required{} and
<input class="required">  


or 
#required{} and
<input id="required">

lets have the fiddle !

answered Aug 20 '12 at 23:18

sheriffderek

8,848
6
43
70

He don't use class or id named "required", but property "required" http://www.w3schools.com/html5/att_input_required.asp – Miljan Puzović Aug 20 '12 at 23:20
oops - didn't catch that --- thanks - i see now. seems to be working fine from my end. maybe just forgot a bracket >? – sheriffderek Aug 20 '12 at 23:29

Why would the existence of a CSS rule cause another not to match?

2 Answers2