| <!doctype html> |
| <html> |
| <head> |
| <style> |
| :root >> target { |
| background-color: lime; |
| } |
| ul >> li + li { |
| border: 1px solid red; |
| } |
| target + ul >> li + li ~ li { |
| border: 2px solid purple; |
| } |
| |
| foo bar { |
| border: 2px solid red; |
| } |
| foo >> bar { |
| border: 2px solid green; |
| } |
| |
| body bar { |
| background-color: red; |
| } |
| body >> bar { |
| background-color: yellow; |
| } |
| |
| .not-there >> *, head >> *, #not-there >> * { |
| background-color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <p>This test verify basic styling using the doubled-child descendant combinator (">>"). Each text should be styled as described.</p> |
| <target>Lime background.</target> |
| <ul> |
| <li>Nothing special - <target>Lime background.</target></li> |
| <li>Red border.</li> |
| <li>Purple border.</li> |
| </ul> |
| <ul> |
| <li>Nothing special - <target>Lime background.</target></li> |
| <li>Red border.</li> |
| <li>Red border.</li> |
| </ul> |
| <foo> |
| <bar> |
| Yellow background and green border. |
| </bar> |
| </foo> |
| </body> |
| </html> |
