ARTICLE AD BOX
I added a rule to my CSS that I intended to apply with the selector .foo.bar. I also wrote in the keyframes. However, I had another animation defined later in the file. I understand now that when the specificity of selectors is equal, the one defined later in the CSS applies. In my code, the animation for selector .foo:last-child applied because it came later than my definition of .foo.bar. Here's the CSS:
.foo.bar { animation: baz 1s; } @keyframes baz { from { background-color: white } to { background-color: black } } .foo:last-child { animation: quux 1s; } @keyframez quux { from { background-color: red } to { background-color: blue } }What threw me is that in the Chrome devtools, when I hovered in the styles tab over the token baz inside the rule .foo.bar, Chrome devtools reported "baz is not defined". Instead of just understanding that the animation wasn't applying because .foo:last-child came later in the CSS, I tried to debug why my animation wasn't defined. The truth is that it was defined the whole time. I guess this is a bug: if an animation is overridden by another one, Chrome devtools says it is undefined.
