Early Access: CSS Combinators and Selectors
This is more of an "educational" cartoon than anything. Trying to use humor (?) to teach about the CSS combinators and how they work:
The children combinator (>) doesn't select any person on the bar but is thanked by a child.
The adjacent sibling combinator (+) only treats the person directly next to it.
Everyone to its right greets the general sibling combinator (~).
And the universal selector (*) is cheered by everyone.
The column combinator is subtly thanked by the other combinators (because they are in the same column in the other panels)
You can find more information about combinators on the MDN site:
This comic will likely have a short blog post explaining the combinators.
I have to admit that drawing it is became a bit tedious. Trying to make all the people different resulted in a messy-messy code (you can see the code on this private CodePen). I still would like to polish it a little bit (although most likely without cleaning the code)