CSS :first-letter

June 03, 2014

I stumbled upon an article the other day that caught my eye. In particular - the usage of a CSS technique I had never seen before… ::first-letter.

Who knew!? I surely did not.

To the east the outflung arm of the mountains marched to a sudden end, and far lands could be descried beyond them, wide and vague. To the south the Misty Mountains receded endlessly as far as sight could reach. Less than a mile away, and a little below them, for they still stood high up on the west side of the dale, there lay a mere. It was long and oval, shaped like a great spear-head thrust deep into the northern glen; but its southern end was beyond the shadows under the sunlit sky. Yet its waters were dark: a deep blue like clear evening sky seen from a lamp-lit room. Its face was still and unruffled. About it lay a smooth sward, shelving down on all sides to its bare unbroken rim.

The pseudo selector is relatively straightforward, though you can find yourself in a world of hurt if you start trying to select the first paragraph element in a container. It’s best to try and pinpoint your first paragraph by a unique classname.

p::first-letter {
  font-size:5em;
  color:steelblue;
  line-height:1;
  font-weight:900;
  margin:0 .1em -.3em 0;
  float:left;
}

Below is how to select the first paragraph tag in a container and act on the first letter:

p:first-child::first-letter {
  /* stuffs */
}

You’re safe using the double colon :: as the selector if you are working in modern browsers. But the Mozilla docs say if you need IE8 or earlier support, use the single colon.

⤎ back to posts