page - CSS: numeración de inicio anidada en 1.1

css numbers

Question

Tengo un conjunto anidado de temas / subtemas relacionados, usando <ol> . El CSS que tengo hasta ahora funciona muy bien desde la parte superior del árbol, pero los usuarios pueden hacer clic en subtemas, y estoy redibujando el conjunto anidado de <ol> , comenzando desde donde el usuario hizo clic. Mi problema es que necesito respetar los números de capítulo, etc.

Entonces, si una estructura típica puede ser esta:

Vehicles
  1. Automobile
    1.1 Street
      1.1.1 Sedan
      1.1.2 Coup
      1.1.3 Truck
    1.2 Race
      1.2.1 
  2. Rail
    2.1 Locomotive
    2.2 High Speed
    2.3 Uni

Y el usuario hace clic en 1.1 Street , necesito mostrar:

1.1 Street
  1.1.1 Sedan
  1.1.2 Coup
  1.1.3 Truck

El CSS que tengo hasta ahora es este:

ol li {display:block;}
ol > li:first-child {counter-reset: item;}
ol > li {counter-increment: item; position: relative;}
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}

Probé algunas variaciones con un segundo contador, ¡pero sin dados! Para complicar este problema, el árbol puede ser infinitamente profundo, por lo que cualquier solución codificada está fuera. ¡Gracias!

Answer 1

Puede ajustar su lista en un bloque externo <ol><li> , luego actualice su CSS para mostrar el contador del contenido anidado

ol ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}

Aquí hay una demostración:

https://jsfiddle.net/q34wdw5p/