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.

p:nth-of-type(odd) {
      background-color: #efefef; /*background color for speaker c - set to white if you want it vanilla*/

p:nth-of-type(even) {
  background-color: pink;/*background color for speaker g - set to white if you want it vanilla*/

Given how pleasant that was, I figured I’d try a few more.

p::first-letter { 
  font-size: 2em;
  color: #424242;
  padding: 0 5px;
  margin-right: 10px;
  line-height: 1.2em;  

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 . . .