|
1 <!doctype html><style> |
|
2 div { float: left } |
|
3 /* Pseudo elements can appear only at the end of the selector. */ |
|
4 .good { color: red } |
|
5 .bad { color: green } |
|
6 #good1::first-letter { color: green } |
|
7 #good2::first-letter, #good3 { color: green } |
|
8 #good4, #good5::first-letter { color: green } |
|
9 div > #good6::first-letter, #good7 { color:green } |
|
10 div #good7 > ::first-letter, #good8 { color:green } |
|
11 |
|
12 #bad1::first-letter *, #bad2 { color: red } |
|
13 #bad4, #bad3::first-letter * { color: red } |
|
14 div::first-line #bad5, #bad6 { color: red } |
|
15 #bad7, div::first-line #bad8 { color: red } |
|
16 #bad9, div ::first-line>#bad10 { color:red } |
|
17 </style><div |
|
18 ><div class="good" id="good1">T</div |
|
19 ><div class="good" id="good2">h</div |
|
20 ><div class="good" id="good3">e</div |
|
21 ><div class="good" id="good4">r</div |
|
22 ><div class="good" id="good5">e</div |
|
23 ><div class="good" id="good6">s</div |
|
24 ><div class="good" id="good7">h</div |
|
25 ><div class="good" id="good8">o</div |
|
26 ><div class="bad" id="bad1" >u</div |
|
27 ><div class="bad" id="bad2" >l</div |
|
28 ><div class="bad" id="bad3" >d</div |
|
29 ><div class="bad" id="bad4" >b</div |
|
30 ><div class="bad" id="bad5" >e</div |
|
31 ><div class="bad" id="bad6" >n</div |
|
32 ><div class="bad" id="bad7" >o</div |
|
33 ><div class="bad" id="bad8" >r</div |
|
34 ><div class="bad" id="bad9" >e</div |
|
35 ><div class="bad" id="bad10">d</div |
|
36 ></div> |