Css selector overwritten, not clear why class is ignored

Hihi! One of my CSS classes is being overwritten by another selector and I do not understand why it is superior, although I targeted especially my desired element “car” to modify it. I believe my desired element has got a more specific selector which should be superior, but it is not. So I added !important to make it work, but it should work without this trick. codepen

Moreover a transition effect is completely ignored. Do you understand, why my desired selector “car” gets overwritten by #cardgrid img?

In the inspector I can see, that my selector is being overwritten/ignored. Could make it partly work with !important, but still do not know why it is overwritten.

Thank you!

An id has a higher specificity than a class in CSS. So #cardgrid img is going to win out over .caranchor>img.car1.

Specificity Calculator

Oh my good, that was it, such a tiny mistake. :laughing: Thank you sooooo much and as well for the usefull link.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.