| <!doctype html> |
| <html> |
| <head> |
| <style> |
| target { |
| display: block; |
| margin: 2px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>This test the specificity of :nth-child() with dynamic specificity of compound selectors. In this case, we verify the matching of siblings does not affect the specificity of the current element. 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="border: 5px solid blue;">Black text with blue border.</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; background-color:green; border: 5px solid blue;">Red text on green background 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; 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> |
| </div> |
| </body> |
| </html> |
