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