only-child.html (1453B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Selectors :only-child</title> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-only-child-pseudo"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <!-- 10 See also child-indexed-pseudo-class.html. 11 --> 12 <body> 13 14 <div> 15 <div id="target1">Whitespace nodes should be ignored.</div> 16 </div> 17 18 <div> 19 <div id="target2">A comment node should be ignored.</div> 20 <!-- --> 21 </div> 22 23 <div> 24 <div id="target3">Non-whitespace text node should be ignored.</div> 25 . 26 </div> 27 28 <div> 29 <blockquote></blockquote> 30 <div id="target4" data-expected="false">There is another child element.</div> 31 </div> 32 33 <div> 34 <div id="target5"></div> 35 </div> 36 37 <script> 38 for (let i = 1; i <= 4; ++i) { 39 let target = document.querySelector(`#target${i}`); 40 test(() => { 41 if (target.dataset.expected == 'false') 42 assert_false(target.matches(':only-child')); 43 else 44 assert_true(target.matches(':only-child')); 45 }, target.textContent); 46 } 47 48 test(() => { 49 const target = document.querySelector('#target5'); 50 assert_true(target.matches(':only-child')); 51 52 const another = target.parentNode.appendChild(document.createElement('div')); 53 assert_false(target.matches(':only-child')); 54 assert_false(another.matches(':only-child')); 55 56 another.remove(); 57 assert_true(target.matches(':only-child')); 58 }, 'Dynamic addition and removal'); 59 60 </script>