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