Using first-letter and first-line

The first-letter and first-line CSS selectors are among the pseudo-selectors. Pseudo-selectors exist not as discrete elements, but as variable elements that exist only as a factor of context or browser state.

First-letter is used to select only the first letter of an element. The syntax is:

p:first-letter {font-size: 1.8em;}

The CSS properties that can be styled for the first-letter selector are font, color, background, text-decoration, vertical-align, text-transform, line-height, margin, padding, border, float and clear.

First-line works with similar syntax.

p:first-line {font-style: italic;}

You can use descendant selectors. For example, if you applied a class called .first to the first paragraph of each section of your page, then a selector like

p.first:first-line {font-style: italic;}

would work.

Leave a Reply