c26-psudo-nest-000.xht (2716B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Multiple Pseudo-Elements</title> 5 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#multiple-pseudo-elements"/> 6 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/> 7 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 8 <style type="text/css"><![CDATA[ 9 body { color: blue; } 10 p:first-line { color: teal; } 11 p:first-letter { color: aqua; } 12 .one:first-line { font-size: 300%; } 13 .one:first-letter { font-size: 300%; } 14 p.two:first-letter { font-size: 200%; } 15 p.two:first-line { font-variant: small-caps; } 16 /* three uses the default styles */ 17 ]]></style> 18 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter" title="5.12.2 The :first-letter pseudo-element"/> 19 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo" title="5.12.1 The :first-line pseudo-element"/> 20 </head> 21 <body> 22 <p class="one"> 23 The <strong>first letter</strong> of this paragraph, and only that 24 one, should be <strong>600% bigger</strong> than the normal text and 25 <strong>aqua</strong>, while the entire <strong>first line</strong> 26 should be <strong>300% bigger</strong> than normal text and 27 <strong>teal</strong>. If this precise combination does not occur, 28 then the user agent has failed this test. Remember that in order to 29 ensure a complete test, the paragraph must be displayed on more 30 than one line. (TEST1) 31 </p> 32 <p class="two"> 33 "Test": The first <strong>two characters</strong> in this paragraph 34 (a double-quote mark and a capital 'T') should be <strong>200% 35 bigger</strong> than the rest of the paragraph, and 36 <strong>aqua</strong>. In addition, the entire <strong>first 37 line</strong> should be in a <strong>small-caps font and 38 teal</strong>. Remember that in order to ensure a complete test, 39 the paragraph must be displayed on more than one line. (TEST2) 40 </p> 41 <p> 42 The <strong>first letter</strong> of this paragraph, and only that 43 one, should be <strong>aqua</strong>, while the entire 44 <strong>first line</strong> should be <strong>teal</strong>. If 45 this precise combination does not occur, then the user agent has 46 failed this test. Remember that in order to ensure a complete test, 47 the paragraph must be displayed on more than one line. (TEST3) 48 </p> 49 <div>You should see the words <strong>"TEST1"</strong>, 50 <strong>"TEST2"</strong>, and <strong>"TEST3"</strong> at the end of 51 three paragraphs above.</div> 52 </body> 53 </html>