| <!doctype html> |
| <html> |
| <head> |
| <style> |
| target { |
| display: block; |
| margin: 2px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>This test the specificity of :nth-last-child() with dynamic specificity of compound selectors. If the test pass, the style of each line should match its text description.</p> |
| <div> |
| <target>Black text.</target> |
| <target>Black text.</target> |
| <target style="color:white; background-color:red; border: 5px solid black;">White text on red background with black border.</target> |
| <target style="color:red; border: 5px solid black;">Red text with black border.</target> |
| <target style="color:white; background-color:red; border: 5px solid purple;">White text on red background with purple border.</target> |
| <target style="border: 5px solid blue;">Black text with blue border.</target> |
| <target style="color:white; background-color:red; border: 5px solid purple;">White text on red background with purple border.</target> |
| <target style="color:red; background-color:green; border: 5px solid blue;">Red text on green background with blue border.</target> |
| </div> |
| </body> |
| </html> |
