| /* The specifity varies with the element being matched. */ |
| :nth-child(even of .foo, #bar, target) { |
| border: 5px solid purple; |
| <p>This test the specificity of :nth-child() with dynamic specificity. If the test pass, the style of each line should match its text description.</p> |
| <target>Black text on white background.</target> |
| <target>White text on red background with a purple border.</target> |
| <target class="foo">Red text on green background.</target> |
| <target class="foo">White text on green background with a purple border.</target> |
| <target id="bar">Black text on white background with a blue border.</target> |
| <target id="bar">White text on red background with a purple border.</target> |
| <target class="foo" id="bar">Red text on green background with a blue border.</target> |
| <target class="foo" id="bar">White text on red background with a purple border.</target> |