<!doctype html>
<html>
<head>
<style>
    /* The most specific selector is target#target.target with a specificity of (1, 1, 1) */
    :matches(foo, :matches(target, :matches(target.target, :matches(#target, .target, target#target.target), #target.target), target#target), bar) {
        background-color: green;
    }

    /* This selector has a specificity of (1, 1, 0) but the selector below has a higher position. */
    #target.target:matches(*) {
        background-color: red;
        color: blue;
    }

    /* The most specific selector is #target.target with a specificity of (1, 1, 0) */
    :matches(target, :matches(target.target, :matches(#target, .target), #target.target), target#target) {
        background-color: red;
        color: white;
    }

    /* This selector has a specificity of (1, 0, 1) but the selector below has a higher position. */
    target#target:not(:not(*, matches(*, *))) {
        background-color: red;
        color: blue;
        border: 25px solid purple;
    }

    /* The most specific selector is target#target with a specificity of (1, 0, 1) */
    :matches(target, :matches(target.target, #target, .target), target#target) {
        background-color: red;
        color: blue;
        border: none;
    }
</style>
</head>
<body>
    <p>This test the specificity of simple nested :matches() selectors. The test succeed is the text "Target" appears on in white over a green background.</p>
    <target id="target" class="target">Target</target>
</body>
</html>