CSS selectors — ::first-line, ::first-letter — using html 401

Both single : and double :: notation used in this test

heading level5 — single : notation

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

heading level5 — double :: notation

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Code used

#t1 p:first-letter {color: green; font-size: 300%; font-weight:bold; background:transparent}
#t1 p:first-line {background: lime; color:#fff;} 
#t2 p::first-letter {color: #ccc; font-size: 300%; font-weight:bold; background:#c00}
#t2 p::first-line {background: lime; color:#fff;}

Notes

  1. this page is served as html 4.01 text/html to all browsers. Opera, up to version 8.5 doesn't understand the :first-line pseudo-element when application/xhtml+xml is used.

back to introduction

Last modified: September 10 2009 03:09:01 GMT.