nth-child-specificity-3.html (1396B)
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-3-ref.html"> 7 <style> 8 /* (1, 2, 1) */ 9 :nth-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) { 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 /* (0, 2, 1) */ 20 target.foo.foo { 21 border: 5px solid black; 22 } 23 24 /* (1, 1, 0) */ 25 .foo#bar { 26 background-color: green; 27 } 28 /* (1, 0, 1) */ 29 target#bar { 30 border: 5px solid blue; 31 } 32 33 target { 34 display: block; 35 margin: 2px; 36 } 37 </style> 38 </head> 39 <body> 40 <div> 41 <target>Black text.</target> 42 <target>Black text.</target> 43 <target class="foo">Red text with black border.</target> 44 <target class="foo">White text on red background with purple border.</target> 45 <target id="bar">Black text with blue border.</target> 46 <target id="bar">White text on red background with purple border.</target> 47 <target class="foo" id="bar">Red text on green background with blue border.</target> 48 <target class="foo" id="bar">White text on red background with purple border.</target> 49 </div> 50 </body> 51 </html>