is-where-pseudo-classes.html (1268B)
1 <!DOCTYPE html> 2 <title>:is() combined with pseudo-classes</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches"> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#useraction-pseudos"> 7 <style> 8 button { 9 color: black; 10 } 11 /* Selects #a, #c */ 12 :is(main :where(main #a), #c:nth-child(odd), #d):is(:enabled) { 13 color: green; 14 } 15 /* Selects #b, #d, #f */ 16 button:is(:nth-child(even), span #e):is(:enabled, :where(:disabled)) { 17 color: blue; 18 } 19 </style> 20 <main> 21 <button id=a>A</button> 22 <button id=b>B</button> 23 <button id=c>C</button> 24 <button id=d disabled>D</button> 25 <button id=e disabled>E</button> 26 <button id=f disabled>F</button> 27 </main> 28 <script> 29 test(function() { 30 assert_equals(getComputedStyle(a).color, 'rgb(0, 128, 0)'); 31 assert_equals(getComputedStyle(b).color, 'rgb(0, 0, 255)'); 32 assert_equals(getComputedStyle(c).color, 'rgb(0, 128, 0)'); 33 assert_equals(getComputedStyle(d).color, 'rgb(0, 0, 255)'); 34 assert_equals(getComputedStyle(e).color, 'rgb(0, 0, 0)'); 35 assert_equals(getComputedStyle(f).color, 'rgb(0, 0, 255)'); 36 }, ':is() combined with pseudo-classes'); 37 </script>