3 /* Pseudo elements can appear only at the end of the selector. */
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 }
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 }
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