Browser resolution of "infinite" CSS Loop

[m_hutley]

So I was playing around with a rather annoying website, trying to replace a background color on an element that was being styled by react’s styled-components.
Short of defining a CSS rule on something like… #rootElement > div >div >div:nth-of-type(3) > div > ....
it occured to me that I could find the element by the property I was trying to replace:
nav [fill="somevalue"] { fill: #someothervalue }

But that led me to think… well, thats an infinite loop - the browser would see the element with “somevalue”, change it to “someothervalue”…but then the element no longer matches the rule, so it would drop off… and then it would match… From what I can see, the Browser settled on the rule being applied.

So a general sort of question… do browsers handle this sort of situation cleanly, or would having this rule in place cause load on the browser as it constantly tries to fight itself?

[m_hutley]

(and yes, i know that technically my above situation isnt actually a loop - the selector’s finding an attribute and overriding with style, so the rule continues to match; but you could attribute-search for style.)

[PaulOB]

I don’t think there’s a problem because the cascade can have many rules the same but only one would win out.

E.g.

[style="background:red"]{background:blue!important;}

It will be blue.

[Thallius]

Not sure if I understand you correct, but reading the CSS is not a looping code. So it is parsed one time and that’s it. So in that case it will replace 1 time and then not got back to the same line replacing again.
This is not a kind of event handler which is called on every change.