| <!doctype html> |
| <html> |
| <head> |
| <style> |
| #target1:is(*)::first-letter { |
| background-color: lime; |
| } |
| |
| #target2:is(::first-letter) { |
| background-color: red; |
| content: "cocoa"; |
| } |
| |
| #target3:is(::before) { |
| background-color: red; |
| content: "cappuccino"; |
| } |
| |
| #target4:is(::before, ::after) { |
| background-color: red; |
| content: "around"; |
| } |
| |
| #target5:is(::first-letter, p) { |
| background-color: lime; |
| } |
| |
| #target6:is(nonexistents, :is(nonexistents, ::first-letter)) { |
| background-color: red; |
| } |
| |
| #target7:is(::before, ::after, *) { |
| background-color: lime; |
| content: "around"; |
| } |
| |
| #target8:not(:is(::first-line)) { |
| background-color: red; |
| } |
| |
| ::first-line #target9 { |
| background-color: red; |
| } |
| |
| :is(::first-line) #target10 { |
| background-color: red; |
| } |
| |
| #target11:is(::first-line > p) { |
| background-color: red; |
| } |
| |
| #target12:is(::first-letter, ::after, ::before) { |
| background-color: red; |
| content: "around"; |
| } |
| |
| #target12::first-letter { |
| background-color: blue !important; |
| } |
| |
| #target13:is(::after > span) { |
| background-color: red; |
| content: "bug"; |
| } |
| |
| #target14:is(::after) > span { |
| background-color: red; |
| } |
| |
| #target15:is(::after > span) > span { |
| background-color: red; |
| } |
| |
| #target16:is(*) > span { |
| background-color: lime; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div> |
| <p id="target1">pseudo element outside :is has effect.</p> |
| <p id="target2">pseudo element inside :is has no effect.</p> |
| <p id="target3">pseudo element inside :is has no effect.</p> |
| <p id="target4">pseudo element inside :is has no effect.</p> |
| <p id="target5">pseudo element inside :is has no effect, so the rest of the selectors should be checked.</p> |
| <p id="target6">pseudo element inside nested :is should have no effect.</p> |
| <p id="target7">::before/after have no effect.</p> |
| <p id="target8">pseudo element inside :not doesn't have effect.</p> |
| <p id="target9">::first-line in non-rightmost fragment always unmatch.</p> |
| <p id="target10">:is(::first-line) in non-rightmost fragment always unmatches.</p> |
| <p id="target11">pseudo element in non-rightmost fragment inside :is always unmatches.</p> |
| <p id="target12">first-letter is colored blue.</p> |
| <p id="target13">non-rightmost pseudo element has no effect.</p> |
| <p id="target14"><span>non-rightmost pseudo element has no effect.</span></p> |
| <p id="target15"><span>non-rightmost pseudo element has no effect.</span></p> |
| <p id="target16"><span>matchType should be effective for normal element.</span></p> |
| </div> |
| </body> |
| </html> |
