In my current project using Ember, I am faced with the challenge of targeting nth-child elements with CSS due to the presence of Ember script tags. Is there a consistent method to achieve this in an Ember application?
Instead of the conventional approach:
.league li:nth-child(1) h3::after { color: #eec600; }
.league li:nth-child(2) h3::after { color: #b0b0b0; }
.league li:nth-child(3) h3::after { color: #ae7435; }
I find myself having to resort to a workaround:
.league li:nth-child(3) h3::after { color: #eec600; }
.league li:nth-child(6) h3::after { color: #b0b0b0; }
.league li:nth-child(9) h3::after { color: #ae7435; }