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; background-color:#fff; padding: 0 5px; margin-right: 10px; float:left; display:absolute; 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
p:nth-of-type(odd)::first-letter{ background-color:#424242; color:#fff; }
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.