wpt/css/selectors/nth-child-and-nth-last-child.html at master · web-platform-tests/wpt · GitHub

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<title>:nth-child and :nth-last-child with selector list argument chained together</title>
<link rel="help" href="https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/selectors-4/#child-index">
<link rel="match" href="nth-child-and-nth-last-child-ref.html">
<style>
    target1 {
        background-color: red;
    }

    :nth-child(1 of target1):nth-last-child(1 of target1) {
        background-color: green;
    }

    .target {
        background-color: red;
    }

    :nth-child(1 of .target):nth-last-child(1 of .target) {
        background-color: green;
    }

    [data-target] {
        background-color: red;
    }

    :nth-child(1 of [data-target]):nth-last-child(1 of [data-target]) {
        background-color: green;
    }
</style>
</head>
<body>
    <p>Test the matching of an element only if it is the only child matching the selector list. If the test succeed, every instance of the text "Success" should be on green background.</p>
    <div>
        <div></div>
        <target1>Foo</target1>
        <div></div>
        <target1>Bar</target1>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <target1>Success</target1>
        <div></div>
    </div>
    <div>
        <div class="nottarget"></div>
        <target class="target">Foo</target>
        <div class="nottarget"></div>
        <target class="target">Bar</target>
        <div class="nottarget"></div>
    </div>
    <div>
        <div class="nottarget"></div>
        <div class="nottarget"></div>
        <target class="target">Success</target>
        <div class="nottarget"></div>
    </div>
    <div>
        <div data-not-target></div>
        <target data-target>Foo</target>
        <div data-not-target></div>
        <target data-target>Bar</target>
        <div data-not-target></div>
    </div>
    <div>
        <div data-not-target></div>
        <div data-not-target></div>
        <target data-target>Success</target>
        <div data-not-target></div>
    </div>
</body>
</html>