counters-scope-001.html (1091B)
1 <!doctype html> 2 <title>CSS Lists and Counters: counters scope</title> 3 <link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters"> 4 <link rel="match" href="counters-scope-001-ref.html"> 5 <meta name="assert" content="counters are not inherited from the previous sibling, when can be inherited from the ancestor"> 6 <style type="text/css"> 7 .scope { counter-reset: c 1; } 8 .scope::before, .scope::after { content: counter(c); } 9 .c::before { content: counter(c); } 10 .one::before { counter-reset: c 2; } 11 .two { counter-reset: c 3; } 12 </style> 13 <p>The following two lines should be the same:</p> 14 <!-- counter on the first span with class "c" is 1, as it inherits the counter from class="scope", as a direct ancestor --> 15 <div> 16 <span class="scope"> 17 <span class="one c"> 18 <span class="c"></span> 19 </span> 20 <span class="c"></span> 21 </span> 22 <span class="c"></span> 23 <span class="scope"> 24 <span class="two c"> 25 <span class="c"></span> 26 </span> 27 <span class="c"></span> 28 </span> 29 <span class="c"></span> 30 </div> 31 <div> 32 1 2 1 1 1 1 33 1 3 3 1 1 1 34 </div>