| <!doctype html> |
| <html> |
| <head> |
| <style> |
| /* The specifity varies with the element being matched. */ |
| :nth-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) { |
| background-color: red; |
| color: white; |
| border: 5px solid purple; |
| } |
| |
| /* (0, 1, 1) */ |
| target.foo { |
| color: red; |
| } |
| /* (0, 2, 1) */ |
| target.foo.foo { |
| border: 5px solid black; |
| } |
| |
| /* (1, 1, 0) */ |
| .foo#bar { |
| background-color: green; |
| } |
| /* (1, 0, 1) */ |
| target#bar { |
| border: 5px solid blue; |
| } |
| |
| target { |
| display: block; |
| margin: 2px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>This test the specificity of :nth-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 class="foo">Red text with black border.</target> |
| <target class="foo">White text on red background with black border.</target> |
| <target id="bar">Black text with blue border.</target> |
| <target id="bar">White text on red background with purple border.</target> |
| <target class="foo" id="bar">Red text on green background with blue border.</target> |
| <target class="foo" id="bar">White text on red background with purple border.</target> |
| </div> |
| </body> |
| </html> |
