blob: 18e00f1ca57dbe6be1f1af10650023f8f3e8e020 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!doctype html>
<html>
<head>
<title>:nth-last-child with selector list specificity</title>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
<link rel="match" href="nth-last-child-specificity-1-ref.html">
<style>
/* The following 3 rules should all have the same specificity when matching <target>. They should be be applied in order. */
foo:nth-last-child(n), bar:nth-last-child(n), target:nth-last-child(n) {
background-color: red;
color: red;
}
:nth-last-child(3n of foo, bar, target) {
background-color: green;
color: blue;
}
foo.target, bar.target, target.target {
color: white;
}
* {
background-color: white;
color: black;
}
</style>
</head>
<body>
<p>This test the specificity of :nth-last-child() with static specificity. The test passes if the text "target" is displayed white on green background. There should be 2 red rects on each side.</p>
<div>
<foo>Not target</foo>
<padding></padding>
<bar>Not target</bar>
<more-padding></more-padding>
<target class="target">Target</target>
<more-padding></more-padding>
<foo>Not target</foo>
<padding></padding>
<bar>Not target</bar>
</div>
</body>
</html>
|
