pseudo-elements-009.html (845B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: Container for highlight pseudo elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container"> 4 <link rel="match" href="pseudo-elements-009-ref.html"> 5 <style> 6 #container { 7 container-type: inline-size; 8 width: 500px; 9 } 10 11 ::selection { color: red; background: transparent; } 12 ::highlight(hi) { color: red; background: transparent; } 13 14 @container (width >= 400px) { 15 ::selection { color: green } 16 ::highlight(hi) { color: green } 17 } 18 </style> 19 <div id="container"> 20 <span id="sel">Selection</span> 21 <span id="hi">Highlight</span> 22 </div> 23 <script> 24 getSelection().selectAllChildren(sel); 25 let highlight_range = document.createRange(); 26 highlight_range.selectNode(hi); 27 CSS.highlights.set("hi", new Highlight(highlight_range)); 28 </script>