Skip to content

Commit eb94d9a

Browse files
fantasaifantasai
committed
[css-lists-3] Move section on nesting up above the details on how it's implemented.
1 parent dba0294 commit eb94d9a

1 file changed

Lines changed: 72 additions & 74 deletions

File tree

‎css-lists-3/Overview.bs‎

Lines changed: 72 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -819,6 +819,78 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
819819
Thus increments will compound,
820820
but only the last set value will take effect.
821821

822+
<h3 id='nested-counters'>
823+
Nested Counters</h3>
824+
825+
Counters are “self-nesting”;
826+
[=instantiating=] a new counter on an element
827+
which inherited an identically-named [=counter=]
828+
from its parent
829+
creates a new counter of the same name,
830+
nested inside the existing counter.
831+
This is important for situations like lists in HTML,
832+
where lists can be nested inside lists to arbitrary depth:
833+
it would be impossible to define uniquely named counters for each level.
834+
The ''counter()'' function only retrieves the innermost counter of a given name on the element,
835+
whereas the ''counters()'' function uses all counters of a given name that contain the element.
836+
837+
<div class="example" id='counter-nesting-example'>
838+
The following code numbers nested list items.
839+
The result is very similar to that of setting ''display:list-item'' and ''list-style: inside'' on the LI element:
840+
841+
<pre highlight=css>
842+
ol { counter-reset: item }
843+
li { display: block }
844+
li::before { content: counter(item) ". "; counter-increment: item }
845+
</pre>
846+
847+
In this example,
848+
an <a element>ol</a> will create a counter,
849+
and all children of the <a element>ol</a> will refer to that counter.
850+
851+
If we denote the <var>n</var><sup>th</sup> instance of the ''item'' counter by item<sub><var>n</var></sub>,
852+
then the following HTML fragment will use the indicated counters.
853+
854+
<div class='ol'>
855+
<div class='ol'><code>&lt;ol></code> item<sub>0</sub> is created, set to 0
856+
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 1</div>
857+
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 2
858+
<div class='ol'><code>&lt;ol></code> item<sub>1</sub> is created, set to 0, nested in item<sub>0</sub>
859+
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 1</div>
860+
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 2</div>
861+
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 3
862+
<div class='ol'><code>&lt;ol></code> item<sub>2</sub> is created, set to 0, nested in item<sub>1</sub>
863+
<div class='li'><code>&lt;li></code> item<sub>2</sub> is incremented to 1</div>
864+
<code>&lt;/ol></code>
865+
</div>
866+
</div>
867+
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 4
868+
<div class='ol'><code>&lt;ol></code> item<sub>3</sub> is created, set to 0, nested in item<sub>1</sub>
869+
<div class='li'><code>&lt;li></code> item<sub>3</sub> is incremented to 1</div>
870+
<code>&lt;/ol></code>
871+
</div>
872+
</div>
873+
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 5</div>
874+
<code>&lt;/ol></code>
875+
</div>
876+
</div>
877+
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 3</div>
878+
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 4</div>
879+
<code>&lt;/ol></code>
880+
</div>
881+
<div class='ol'><code>&lt;ol></code> item<sub>4</sub> is created, set to 0
882+
<div class='li'><code>&lt;li></code> item<sub>4</sub> is incremented to 1</div>
883+
<div class='li'><code>&lt;li></code> item<sub>4</sub> is incremented to 2</div>
884+
<code>&lt;/ol></code>
885+
</div>
886+
</div>
887+
<style>
888+
#counter-nesting-example .ol { background: rgba(0,0,0,.1); margin: .5em 0; padding: .2em .5em; }
889+
#counter-nesting-example .li > .ol { margin: 0 0 0 1em; }
890+
#counter-nesting-example .li { list-style: none; margin-left: 1em;}
891+
</style>
892+
</div>
893+
822894
<h3 id="creating-counters">
823895
Creating and Inheriting Counters</h3>
824896

@@ -949,80 +1021,6 @@ Creating and Inheriting Counters</h3>
9491021
</style>
9501022

9511023

952-
<h3 id='nested-counters'>
953-
Nested Counters</h3>
954-
955-
Counters are “self-nesting”;
956-
[=instantiating=] a new counter on an element
957-
which inherited an identically-named [=counter=]
958-
from its parent
959-
creates a new counter of the same name,
960-
nested inside the existing counter.
961-
This is important for situations like lists in HTML,
962-
where lists can be nested inside lists to arbitrary depth:
963-
it would be impossible to define uniquely named counters for each level.
964-
As explained in a later section,
965-
the ''counter()'' function only uses the innermost counter of a given name on the element,
966-
whereas the ''counters()'' function uses all counters of a given name that contain the element.
967-
968-
<div class="example" id='counter-nesting-example'>
969-
The following code numbers nested list items.
970-
The result is very similar to that of setting ''display:list-item'' and ''list-style: inside'' on the LI element:
971-
972-
<pre highlight=css>
973-
ol { counter-reset: item }
974-
li { display: block }
975-
li::before { content: counter(item) ". "; counter-increment: item }
976-
</pre>
977-
978-
In this example,
979-
an <a element>ol</a> will create a counter,
980-
and all children of the <a element>ol</a> will refer to that counter.
981-
982-
If we denote the <var>n</var><sup>th</sup> instance of the ''item'' counter by item<sub><var>n</var></sub>,
983-
then the following HTML fragment will use the indicated counters.
984-
985-
<div class='ol'>
986-
<div class='ol'><code>&lt;ol></code> item<sub>0</sub> is created, set to 0
987-
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 1</div>
988-
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 2
989-
<div class='ol'><code>&lt;ol></code> item<sub>1</sub> is created, set to 0, nested in item<sub>0</sub>
990-
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 1</div>
991-
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 2</div>
992-
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 3
993-
<div class='ol'><code>&lt;ol></code> item<sub>2</sub> is created, set to 0, nested in item<sub>1</sub>
994-
<div class='li'><code>&lt;li></code> item<sub>2</sub> is incremented to 1</div>
995-
<code>&lt;/ol></code>
996-
</div>
997-
</div>
998-
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 4
999-
<div class='ol'><code>&lt;ol></code> item<sub>3</sub> is created, set to 0, nested in item<sub>1</sub>
1000-
<div class='li'><code>&lt;li></code> item<sub>3</sub> is incremented to 1</div>
1001-
<code>&lt;/ol></code>
1002-
</div>
1003-
</div>
1004-
<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 5</div>
1005-
<code>&lt;/ol></code>
1006-
</div>
1007-
</div>
1008-
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 3</div>
1009-
<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 4</div>
1010-
<code>&lt;/ol></code>
1011-
</div>
1012-
<div class='ol'><code>&lt;ol></code> item<sub>4</sub> is created, set to 0
1013-
<div class='li'><code>&lt;li></code> item<sub>4</sub> is incremented to 1</div>
1014-
<div class='li'><code>&lt;li></code> item<sub>4</sub> is incremented to 2</div>
1015-
<code>&lt;/ol></code>
1016-
</div>
1017-
</div>
1018-
<style>
1019-
#counter-nesting-example .ol { background: rgba(0,0,0,.1); margin: .5em 0; padding: .2em .5em; }
1020-
#counter-nesting-example .li > .ol { margin: 0 0 0 1em; }
1021-
#counter-nesting-example .li { list-style: none; margin-left: 1em;}
1022-
</style>
1023-
</div>
1024-
1025-
10261024
<h3 id='counters-without-boxes'>
10271025
Counters in elements that do not generate boxes</h3>
10281026

0 commit comments

Comments
 (0)