nth-child-specificity-2.html (1377B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>:nth-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-child-specificity-2-ref.html"> 7 <style> 8 /* (1, 1, 0) */ 9 :nth-child(even of .foo, #bar, target) { 10 background-color: red; 11 color: white; 12 border: 5px solid purple; 13 } 14 15 /* (0, 1, 1) */ 16 target.foo { 17 color: red; 18 } 19 20 /* (0, 2, 0) */ 21 .foo.foo { 22 background-color: green; 23 } 24 /* (1, 0, 1) */ 25 target#bar { 26 border: 5px solid blue; 27 } 28 29 target { 30 display: block; 31 margin: 2px; 32 } 33 </style> 34 </head> 35 <body> 36 <div> 37 <target>Black text on white background.</target> 38 <target>White text on red background with a purple border.</target> 39 <target class="foo">Red text on green background.</target> 40 <target class="foo">White text on red background with a purple border.</target> 41 <target id="bar">Black text on white background with a blue border.</target> 42 <target id="bar">White text on red background with a purple border.</target> 43 <target class="foo" id="bar">Red text on green background with a blue border.</target> 44 <target class="foo" id="bar">White text on red background with a purple border.</target> 45 </div> 46 </body> 47 </html>