Kobashi Computing

In this tutorial, we are going to have some fun. We are going to focus on the first-letter selector and along the way pick up a bag of CSS selector tricks.

Let's start right away. Copy and paste this code into your favorite text editor and bring it up with your browser. Here is how we can use the first-letter selector to make our page look like a Once Upon A Time book with a gigantic letter to start things off.

In Safari 5.1.2, Opera 11.61, Internet Explorer 9.08 we get this look where the first letter is well below the top of the paragraph box:

In Firefox 10.0.2 we get this rendering that looks, well, correct.

Turns out, to make the other browsers render like Firefox, you have to add a line-height setting:

More CSS Selector and first-letter fun

Let's assume we have a container page div wrapping two row divs of one paragraph each. Lets try some css on it.

This CSS code will select every paragraph's first letter and make it big.

This CSS code will only make row1's first paragraph 's first letter big:

Notice that in this example above, we had a container to help us out with selection (div.row1). Each row was a wrapper for a paragraph. This made it possible to select the first paragraph in the page. But this was a structural trick. Normally when you using a content management system, most people are not going to write their blog posts with div markup in it.

Suppose row1 had multiple paragraph tags in it.

How would you markup the first paragraph's first letter and not the other paragraphs within it? Here's how:

By specifying row1's first paragraph as the first child and using the first-letter selector, you can get the same effect without touching the other paragraphs. Note that I put a red border around row2 to distinguish it from row1 in green.

Lets assume we have four paragraphs in our row1 div:

And what will this code do?

This uses the nth-child operator which takes a mathematical expression and iterates through the tree by running n=0 to the end of the child list. In this case, every even numbered paragraph of row1 will get a big fat letter.

Finally, lets take an example that is common in content layouts - the multi column structure. This is one demonstrated in books and magazine layouts where the first letter of the first paragraph has a big letter. To pull this sort of layout out

we have to use a div structure with the same class name:

To get at the first letter in the first div, there are three ways from clever to not so clever.

1. We can use the first-of-type selector (thanks to Tony at CSSCreator) on the class col like so:
   
   div.col:first-of-type p:first-child:first-letter {
  float: left;
  font-size: 3em;
  color: #333;
line-height: 0.6em;
}
2. We can also use nth-of-type(1):
   div.col:nth-of-type(1) p:first-child:first-letter {
  float: left; /* float to let text wrap around it */
  font-size: 3em;
  color: #333;
line-height: 0.6em;
}
3. Or lastly, mark the first div with "first":
   
   <code>
   <div id="page">
   <div class="col first">
     <p>Aorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
   <div class="col">
     <p>Aorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
   </div>

   .col.first p:first-child:first-letter {
  float: left; /* float to let text wrap around it */
  font-size: 3em;
  color: #333;
  line-height: 0.6em;
}

Summary

In this tutorial you learned about the first-letter selector. In particular how to style:

• Every first letter in a paragraph
• Only the first paragraph through wrapper
• Only the first paragraph via the first-child selector
• The first letter of any paragraph via a mathematical expression
• A multi column layout to set the first paragraph's first letter