They definitely can be misused (and their accessibility is a bit ambiguous sometimes).
That join selector isn't the worst thing in the world. My preference would be to add it via the template if at all possible, but we don't always have access to the template. Someone else in the thread mentioned not having WordPress behaving and they used a ::before to do a price label:
Only yesterday I asked a question on stackoverflow for WordPress - how to add to the price of a variable product, left the word Price, and then, not finding the answer, I took it and made it through ::before
Well I do have access to the template, it's a single page app I am developing, so I could. However I went for the ::before selector for the following reasons:
it is not content per se, it is just a presentation choice. I could display the list as a bulleted list. I choose to display it inline with commas, so I would file it into display rather than content
adding that comma through template would add a lot of somewhat complex logic : I would need to iterate on my list while maintaining a boolean to check whether I should add a comma or not, since I should add it before my first element, or vice versa after my last element. I am not even sure the templating engine I am using would enable that
I would love to have feedback though, if anybody thinks it is inappropriate, or there is a more correct way to achieve that
Inside loops, you have access to a few special variables:
loop.index: the current iteration of the loop (1 indexed)
loop.index0: the current iteration of the loop (0 indexed)
loop.revindex: number of iterations until the end (1 indexed)
loop.revindex0: number of iterations until the end (0 based)
loop.first: boolean indicating the first iteration
loop.last: boolean indicating the last iteration
loop.length: total number of items
If you don't have all that, then I'm all about that ::after use case! :D
It seems that it would be really easy to use
::beforeand::afterto apply bad practices.Personally, I have used it just yesterday to "join" a list of elements with commas, using
li:not(:last-child)::after { content: ", "; }However I am not 100% sure there isn't a better way to do it
They definitely can be misused (and their accessibility is a bit ambiguous sometimes).
That join selector isn't the worst thing in the world. My preference would be to add it via the template if at all possible, but we don't always have access to the template. Someone else in the thread mentioned not having WordPress behaving and they used a ::before to do a price label:
Only yesterday I asked a question on stackoverflow for WordPress - how to add to the price of a variable product, left the word Price, and then, not finding the answer, I took it and made it through ::before
div.summary-inner span.price .amount::before {
content: 'Цена: ';
}
Watch result you can at here parketdoska.ua/каталог/acacia/акац...
Well I do have access to the template, it's a single page app I am developing, so I could. However I went for the
::beforeselector for the following reasons:I would love to have feedback though, if anybody thinks it is inappropriate, or there is a more correct way to achieve that
I see! Yeah, if your templating engine would make the logic complicated, I totally understand that.
I'm used to templating engines like Twig and Nunjucks that have an idea of first and last of a loop for conditional logic.
From the Nunjucks documentation as an example (mozilla.github.io/nunjucks/templat...
If you don't have all that, then I'm all about that ::after use case! :D
Thanks!
Yeah I am using TeaVM's Flavour, so I don't think there is any of that yet.
Though I am still wondering whether even with that, it wouldn't make more sense to consider this comma as a layout choice, not content