5 replies [Last post]
batnik
batnik's picture
Offline
newbie
Last seen: 24 weeks 4 days ago
Timezone: GMT+3
Joined: 2020-05-22
Posts: 3
Points: 6

Sorry for my english

There is a question.
There is a numbered

    list with styling elements via css.
    Using html you can set the beginning for
      and for
    1. , but when applying css to the list, these parameters do not work. In addition, I did not find the possibility by means of html to make a list with fractional numbers (i.e. 1.1, 1.2, 1.3, etc.). But everything got in CSS.

But in CSS, I have several drop-down blocks that go on with the same numbered list. The problem is that when a block with part of the list is hidden, the numbering in the next block continues from the visible block.
Those. if the first block ends at 1.3, the second starts at 1.4. and ends at 1.6., the third starts at 1.7, then when the second block is closed, the third immediately changes the numbering and starts at 1.4. And it is necessary that each block retains its numbering, regardless of whether other blocks participating in the list are displayed.

Something like this code

<div class="numbers">
<ol>
  <li>
<input class="hide" id="hd-120" type="checkbox">
<label for="hd-120">Большой раздел</label>
<div class="pop">
    <ol class="numbers">
<input class="hide" id="hd-121" type="checkbox">
<label for="hd-121"><h5>Раздел первый </h5></label>
<div>
      <li>первая строка</li>
      <br/>
      <li>sub li element</li>
      <br/>
      <li>sub li element</li>
  </div>
<input class="hide" id="hd-122" type="checkbox">
<label for="hd-122"><h5>Второй подраздел</h5></label>
<div>
      <li>sub li element</li>
      <br/>
      <li>sub li element</li>
      <br/>
      <li>sub li element</li>
      </div>
<input class="hide" id="hd-123" type="checkbox">
<label for="hd-123"><h5>Третий подраздел</h5></label>
<div>  
      <li>sub li element</li>
      <br/>
      <li>sub li element</li>
      <br/>
      <li>sub li element</li>
      </li>
    </ol>
    </div>
</div>

-css-
body {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
background-color: #FF8C00;
counter-reset: section;
}

.hide,
.hide + label ~ div {
display: none;
}
.hide + label {
margin: 0;
padding: 0;
color: black;
cursor: pointer;
display: inline-block;
}
.hide:checked + label {
color: #800000;
border-bottom: 0;
}
.hide:checked + label + div {
display: block;
background: #FF8C00;
-moz-box-shadow: inset 3px 3px 10px #7d8e8f;
-webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
box-shadow: inset 3px 3px 10px #7d8e8f;
margin-left: 20px;
padding: 10px;
-webkit-animation:fade ease-in 0.5s;
-moz-animation:fade ease-in 0.5s;
animation:fade ease-in 0.5s;
}
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
.hide + label:before {
background-color: #8B0000;
color: #fff;
content: "\002B";
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 16px;
line-height: 16px;
margin: 3px 5px;
text-align: center;
width: 16px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.hide:checked + label:before {
content: "\2212";
}
.btn {
margin: 10px;
}
.tooltip-inner {
max-width: fit-content !important;
padding: 3px 8px;
color: #000 !important;
text-align: center;
background-color: #FFD700 !important;
border-radius: 4px;
}

ol {
counter-reset: drob-counter;
}
li {
/* display: block;*/
display: inline;
}
li::before {
content: "СН " counters(drob-counter, ".") " ";
counter-increment: drob-counter;
}
div.pop label{
display: inline;
}
div.pop h5 {
counter-reset: subsection;
}
div.pop h5::before {
counter-increment: section;
content: counter(section) " ";
}

ol.numbers > li:before {
counter-increment: drob-counter;
content: counter(drob-counter) ". ";
font-weight: bold;
}
-css-

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

List is broken

Your list and sub-lists are broken. Don't use DIV to nest your sub-lists, use another OL:

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

Then apply your counting.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

batnik
batnik's picture
Offline
newbie
Last seen: 24 weeks 4 days ago
Timezone: GMT+3
Joined: 2020-05-22
Posts: 3
Points: 6

I know that. But in this case

I know that. But in this case my list units can`t be closed/opened. It`s important for me that they can.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

You must have a properly nested structure

See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters.

By breaking the nesting's structure, you break the counter's structure.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

batnik
batnik's picture
Offline
newbie
Last seen: 24 weeks 4 days ago
Timezone: GMT+3
Joined: 2020-05-22
Posts: 3
Points: 6

gary.turner wrote: See:

gary.turner wrote:

See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters.

By breaking the nesting's structure, you break the counter's structure.

I need to use several counters because I need the counter's structure "to be broken":

1 First level (parent to third level)
1 Second level
1.1 Third level (child to first level)
1.2 Third level (child to first level)
1.3 Third level (child to first level)
2 Second level
1.4 Third level (child to first level)
1.5 Third level (child to first level)
1.6 Third level (child to first level)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

I'm pretty sure you're

I'm pretty sure you're overthinking this, allowing the desired [i]appearance[/i to determine your structure. That is backassward. By definition, the third level is child of its parent, not its grandparent.

What is the function/structural meaning of level 2? It looks to me like it's a heading or introductory note to its child LIs.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.