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.)

Answer 1

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.