68 lines
2.4 KiB
HTML
68 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Test the specificity of the :not() pseudo class itself.</title>
|
|
<style>
|
|
/* -- 1. Set up the base color for everything with a very low specificity -- */
|
|
|
|
/* Each mathing of the type "notthereX should have a specificity of (0, 0, 1), the maxium of this selector should be (0, 0, 1). */
|
|
:not(:not(*), notthere1, notthere2, notthere3, notthere4, notthere5) {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
/* The pseudo class :not() itself should have no specificity. The following rule should not have precedence over "*". */
|
|
:not(:not(*)) { /* Specificity: (0, 0, 0). */
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
|
|
/* -- 2. Test class specificity. -- */
|
|
.case {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
|
|
body > testcase.case { /* Specificity (0, 1, 2). */
|
|
border: none;
|
|
}
|
|
|
|
testcase:not(.not-there) { /* Specificity (0, 1, 1). */
|
|
color: lime;
|
|
border: 10px solid black;
|
|
}
|
|
|
|
/* Specificity (0, 1, 1) since .not-there has the highest specificity inside :not(). */
|
|
testcase:not(:not(*), foo, .not-there, bar) {
|
|
background-color: pink;
|
|
border: 50px solid black;
|
|
}
|
|
|
|
/* -- 3. Test #id specificty, all those rules should override the class rules above. -- */
|
|
#case2 {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
|
|
body > testcase#case2 { /* Specificity (1, 0, 2). */
|
|
border: none;
|
|
}
|
|
|
|
testcase:not(#case1) {
|
|
color: pink;
|
|
border: 10px solid black;
|
|
}
|
|
|
|
testcase:not(:not(*), foo, bar, foo.class1.class2, bar.class1.class2.class3.class4, #case1) {
|
|
background-color: lime;
|
|
border: 50px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test the specificity of the :not() pseudo class. The pseudo class :not() itself does not add anything to the specificity of a its selector, only the selectors inside :not() matter for specificity.</p>
|
|
<testcase class="case" id="case1">This sentence should be green on a pink background, without border.</testcase>
|
|
<testcase class="case" id="case2">This sentence should be pink on a green background, without border.</testcase>
|
|
</body>
|
|
</html>
|