42 lines
1.1 KiB
HTML
42 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
/* Specificity of (1, 1, 1) */
|
|
:is(.target):is(#target):is(target) {
|
|
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;
|
|
}
|
|
|
|
/* Specificity of (1, 1, 0) */
|
|
:is(#target):is(.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;
|
|
}
|
|
|
|
/* Specificity of (1, 0, 1) */
|
|
:is(target):is(#target) {
|
|
background-color: red;
|
|
color: blue;
|
|
border: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>This test the specificity when chaining multiple :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>
|