| /* The most specific selector is target#target.target with a specificity of (1, 1, 1) */ |
| :matches(target, target.target, #target, .target, target#target.target, #target.target, target#target) { |
| /* This selector has a specificity of (1, 1, 0) but the selector below has a higher position. */ |
| #target.target:matches(*) { |
| /* The most specific selector is #target.target with a specificity of (1, 1, 0) */ |
| :matches(target, target.target, #target, .target, #target.target, target#target) { |
| /* This selector has a specificity of (1, 0, 1) but the selector below has a higher position. */ |
| target#target:not(:not(*, matches(*, *))) { |
| border: 25px solid purple; |
| /* The most specific selector is target#target with a specificity of (1, 0, 1) */ |
| :matches(target, target.target, #target, .target, target#target) { |
| <p>This test checks the dynamic specificity of :matches() with compound selectors. The test succeed is the text "Target" appears on in white over a green background.</p> |
| <target id="target" class="target">Target</target> |