How can the presence of a CSS rule prevent another from being applied?

Question

My attempt to create this HTML file in Chrome posed some challenges:

<style>
br {
}

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

</style>
<input required />

The entire content of the file is shown above. However, I noticed that the [required] rule does not match and the <input> remains unstyled.

If I remove the empty br rule so the file looks like this:

<style>

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

</style>
<input required />

It works perfectly fine!

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

Thank you. (It works fine on jsfiddle, but the issue only arises when creating actual files.)

Answer 1

Answer №1

Your new line seems to be causing an issue. The code functions correctly once it is removed.

The problem appears to be located right after the closing bracket for br. In vim, this is what I see:

<style>
br {
}<200b>

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

</style>
<input required />

It looks like <200b> is a Unicode zero width space. I am unsure why this character is present in the file and deleting it fixes the problem.

Answer 2

Your new line seems to be causing an issue. The code functions correctly once it is removed.

The problem appears to be located right after the closing bracket for br. In vim, this is what I see:

<style>
br {
}<200b>

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

</style>
<input required />

It looks like <200b> is a Unicode zero width space. I am unsure why this character is present in the file and deleting it fixes the problem.

Answer 3

It seems like the "br" element is assisting in deceiving the browser - possibly due to the presence of additional brackets.

I believe there may be something overlooking...

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


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

Shall we create a fiddle?

Answer 4

It seems like the "br" element is assisting in deceiving the browser - possibly due to the presence of additional brackets.

I believe there may be something overlooking...

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


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

Shall we create a fiddle?