container-units-selection-pseudo.html (774B)
1 <!DOCTYPE html> 2 <title>Container-relative units in ::selection</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 4 <link rel="match" href="container-units-selection-pseudo-ref.html"> 5 <style> 6 #outer, #inner { 7 container-type: size; 8 } 9 #outer { 10 width: 200px; 11 height: 200px; 12 border: 1px solid black; 13 } 14 #inner { 15 width: 100px; 16 height: 100px; 17 background-color: skyblue; 18 } 19 #inner::selection { 20 background-color: seagreen; 21 text-decoration: underline solid; 22 text-underline-offset: 10cqh; 23 } 24 </style> 25 <div id=outer> 26 <div id=inner> 27 Some text 28 </div> 29 </div> 30 31 <script> 32 let range = document.createRange(); 33 range.selectNode(inner); 34 window.getSelection().addRange(range); 35 </script>