42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
<!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>
|