scope-visited-ref.html (2217B)
1 <!DOCTYPE html> 2 <title>@scope - :visited</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#link"> 5 6 <style> 7 /* The visited background-color magically gets the alpha of the 8 unvisited color, which by default is rgba(0, 0, 0, 0). Set alpha to 9 255 so that visited colors also gets this alpha. */ 10 * { background-color: rgba(255, 255, 255, 255); } 11 </style> 12 13 <!-- :visited via :scope in subject --> 14 <div> 15 <a id=visited href="" style="background-color:coral"> 16 Visited <span>Span</span> 17 </a> 18 </div> 19 20 <!-- :link via :scope in subject --> 21 <div> 22 <a id=unvisited href="x" style="background-color:skyblue"> 23 Unvisited <span>Span</span> 24 </a> 25 </div> 26 27 <!-- :visited via :scope in non-subject --> 28 <div> 29 <a id=visited href=""> 30 Visited <span style="background-color:coral">Span</span> 31 </a> 32 </div> 33 34 <!-- :link via :scope in non-subject --> 35 <div> 36 <a id=unvisited href="x"> 37 Unvisited <span style="background-color:skyblue">Span</span> 38 </a> 39 </div> 40 41 <!-- :visited in scope-end --> 42 <div> 43 <main> 44 Main 45 <a id=visited href=""> 46 Visited <span>Span</span> 47 </a> 48 </main> 49 </div> 50 51 <!-- :visited in scope-end, unvisited link --> 52 <div> 53 <main> 54 Main 55 <a id=unvisited href="x" style="background-color:skyblue"> 56 Unvisited <span>Span</span> 57 </a> 58 </main> 59 </div> 60 61 <!-- :link in scope-end --> 62 <div> 63 <main> 64 Main 65 <a id=unvisited href="x"> 66 Unvisited <span>Span</span> 67 </a> 68 </main> 69 </div> 70 71 <!-- :link in scope-end, visited link --> 72 <div> 73 <main> 74 Main 75 <a id=visited href="" style="background-color:coral"> 76 Visited <span>Span</span> 77 </a> 78 </main> 79 </div> 80 81 <!-- :link in scope-end, visited link --> 82 <div> 83 <main> 84 Main 85 <a id=outer_visited href=""> 86 Visited1 87 </a> 88 </main> 89 </div> 90 <script> 91 // Insert inner <a> with JS, since the parser can't produce this result. 92 let inner_a = document.createElement('a'); 93 inner_a.setAttribute('href', ''); 94 inner_a.setAttribute('class', 'with_class_inner'); 95 inner_a.setAttribute('style', 'color: green'); 96 inner_a.textContent = 'Visited2'; 97 outer_visited.append(inner_a); 98 </script>