blob: abd4fa0cf9e79f43a0d6a675ad030486ad47ef35 [file] [log] [blame]
<!doctype html>
<html>
<head>
<style>
/* The most specific selector is target#target.target with a specificity of (1, 1, 1) */
:is(foo, :is(target, :is(target.target, :is(#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:is(*) {
background-color: red;
color: blue;
}
/* The most specific selector is #target.target with a specificity of (1, 1, 0) */
:is(target, :is(target.target, :is(#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(*, :is(*, *))) {
background-color: red;
color: blue;
border: 25px solid purple;
}
/* The most specific selector is target#target with a specificity of (1, 0, 1) */
:is(target, :is(target.target, #target, .target), target#target) {
background-color: red;
color: blue;
border: none;
}
</style>
</head>
<body>
<p>This test the specificity of simple nested :is() 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>