77 lines
2.9 KiB
HTML
77 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
* {
|
|
color: black;
|
|
}
|
|
/* Simple Selector. */
|
|
.case1:not(.notgreen) {
|
|
color: green;
|
|
}
|
|
/* Compound Selector. */
|
|
.case2:not(.foo.bar) {
|
|
color: green;
|
|
}
|
|
/* Element not in a link. */
|
|
.case3:not(a *) {
|
|
color: green;
|
|
}
|
|
/* Neither .foo nor .bar. */
|
|
.case4:not(.foo, .bar) {
|
|
color: green;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.addEventListener("load", function() {
|
|
document.body.offsetTop; // Force layout.
|
|
document.getElementById("case1update1").classList.add("notgreen");
|
|
document.getElementById("case1update2").classList.add("notgreen");
|
|
document.getElementById("case2update1").classList.add("foo");
|
|
document.getElementById("case2update1").classList.add("bar");
|
|
document.getElementById("case2update2").classList.add("bar");
|
|
document.getElementById("case2update2").classList.add("foo");
|
|
document.getElementById("case4update1").classList.add("foo");
|
|
document.getElementById("case4update2").classList.add("bar");
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p>Test various use cases of the :not() pseudo class. If the test succeed, the text "GREEN" should be colored green.</p>
|
|
<div>
|
|
<span class="case1 notgreen">WebKit</span> <span class="case1">GREEN</span> <span class="case1 notgreen">WebKit</span>
|
|
<span id="case1update1" class="case1">WebKit</span> <span class="case1">GREEN</span> <span id="case1update2" class="case1">WebKit</span>
|
|
|
|
<span class="case2 foo bar">WebKit</span> <span class="case2">GREEN</span> <span class="case2 foo bar">WebKit</span>
|
|
<span id="case2update1" class="case2">WebKit</span> <span class="case2">GREEN</span> <span id="case2update2" class="case2">WebKit</span>
|
|
|
|
<div>
|
|
<a>
|
|
<div>
|
|
<span>WebKit</span>
|
|
<span class="case3">WebKit</span>
|
|
<span>WebKit</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<span>WebKit</span>
|
|
<span class="case3">GREEN</span>
|
|
<span>WebKit</span>
|
|
<div>
|
|
<span>WebKit</span>
|
|
<span class="case3">GREEN</span>
|
|
<span>WebKit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="case4 foo">WebKit</span> <span class="case4">GREEN</span> <span class="case4 bar">WebKit</span>
|
|
<span id="case4update1" class="case4">WebKit</span> <span class="case4">GREEN</span> <span id="case4update2" class="case4">WebKit</span>
|
|
</div>
|
|
</body>
|
|
</html>
|