| <!doctype html> |
| <html> |
| <head> |
| <style> |
| .target::before { |
| content: "Target"; |
| } |
| |
| /* This rule has two .target, making it higher specificity than the rules below. */ |
| .target:matches(*, target, .target, *, target)::before { |
| background-color: green; |
| } |
| |
| /* This rule has a tagname and a class name, making it higher specificity than ".target:matches(*)::before". */ |
| target:matches(*, target, .target, *, target)::before { |
| color: white; |
| } |
| |
| .target:matches(*)::before { |
| background-color: red; |
| color: blue; |
| border: none; |
| } |
| /* This rule only has (0, 0, 3) and it superseded by the rule above. */ |
| target:matches(*, target, *)::before { |
| border: 25px solid purple; |
| } |
| |
| /* This rule has lower specificity than all the rules above and its property never applies. */ |
| :matches(#target, target)::before { |
| content: "Not Target"; |
| } |
| </style> |
| </head> |
| <body> |
| <p>This test checks the specificity of the rules inside :matches() applying to the pseudo element ::before. The test succeed if the text "Target" is displayed in white on a green background.</p> |
| <target class="target"></target> |
| </body> |
| </html> |
