| <!doctype html> |
| <html> |
| <head> |
| <style> |
| .target::before { |
| content: "Target"; |
| } |
| |
| .target:matches(*, target, .target, *, target)::before { |
| background-color: green; |
| } |
| |
| target:matches(*, target, .target, *, target)::before { |
| color: white; |
| } |
| |
| .target:matches(*)::before { |
| background-color: red; |
| color: blue; |
| border: none; |
| } |
| target:matches(*, target, *)::before { |
| border: 25px solid purple; |
| } |
| |
| :matches(foo, 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> |
