Simple Interview Formatting Using Pseudo Elements

I had a quick question today about formatting an interview. That led to some quick experimentation in Code Pen and some simple uses of pseudo class selectors.1 When I first looked at the transcript I started to assign a class to each paragraph. That would work but was tedious. Given we were switching speakers at every paragraph I could be clever/lazy. nth-of-type will let me select odd and even elements. You can also be far fancier (every 5th etc.) but even/odd was all I needed. Given how pleasant that was, I figured I’d try a few more. This CSS lets me grab the first letter (and the colon) of the paragraphs and make them a bit like a drop cap.2 I wondered if I could use the selectors in combination to alternately style the first letters drop caps. Turns out you can. Anyway a fun 10 minutes or so that might be of interest to other wanderers out there. See the Pen demo for clare – fancy version by Tom (@twwoodward) on CodePen. 1 Disregard my neapolitan-ice-cream-inspired color scheme. 2 I had to look up the word for ‘big letters in medieval manuscripts’ and didn’t actually read/follow the tips for drop caps at the URL linked here . . .