| <!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. 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 id="bar">Black text with blue border.</target> |
| <target class="foo">White text on red background with black border.</target> |
| <target class="foo" id="bar">Red text on green background with blue border.</target> |
| <target id="bar">White text on red background with purple border.</target> |
| <target class="foo">Red text with black border.</target> |
| <target class="foo" id="bar">White text on red background with purple border.</target> |
| </div> |
| </body> |
| </html> |
