This is a "don't do this at home" type of solution. Will it work? Yes. Is is worth it? We can all agree that CSS is always worth it (:P), but in this case, it may end up with a ton of unnecessary HTML code.
The idea is to use a ul/ol to represent the list of people, and with counters keep track of the number of likes (aka people in the list). Then with pseudo-elements display the appropriate message or connector.
ul,ol{display:block;list-style:none;padding-left:0;clear:both;height:40px;line-height:40px;counter-reset:people-2;}li{display:inline-block;float:left;font-size:1rem;counter-increment:people;}/* empty list */ul:empty::before,ol:empty::before{content:"No one likes this post.";}/* one element only */li:first-child:last-child::after{content:" likes this post.";}/* separate all names by commas */li:not(:first-child)::before{content:", ";}/* the last name (or from the third one) will end the list */li:nth-child(n+3)::before,li:last-child:not(:first-child)::before{content:"\00a0 and ";}/* add message for multiple names */li:nth-child(n+3)::after,li:last-child::after{content:" like this post.";}/* from the 4th element forth, they must be hidden */li:nth-child(n+3):not(:last-child){font-size:0;}/* the last element in a list of 4 or more is special */li:nth-child(n+4):last-child::before{font-size:1rem;content:"\00a0 and "counter(people)" others like this post.";}li:nth-child(n+4):last-child{font-size:0;}li:nth-child(n+4):last-child::after{content:"";}
CSS
This is a "don't do this at home" type of solution. Will it work? Yes. Is is worth it? We can all agree that CSS is always worth it (:P), but in this case, it may end up with a ton of unnecessary HTML code.
The idea is to use a
ul
/ol
to represent the list of people, and with counters keep track of the number of likes (aka people in the list). Then with pseudo-elements display the appropriate message or connector.And here is a demo on codepen:
Bloody brilliant!
Also, I'm more of an Oxford-comma type of person, but the challenge didn't have it. (That is my excuse and I'll stick to it)
Thanks to this challenge, I learnt that CSS counters don't increment in elements with
display: none
. Which is nice.