css-counter

Repeated series of number via CSS

由 眉间皱痕 提交于 2019-12-06 05:06:27
问题 I'm trying to do something like this: <h2>1.1 Bananas</h2> <h3>1.1.1 </h3> <h3>1.1.2 </h3> <h3>1.1.3 </h3> <h2>1.1 Apples</h2> <h3>1.1.1 </h3> <h3>1.1.2 </h3> <h3>1.1.3 </h3> <h2>1.1 Oranges</h2> <h3>1.1.1</h3> <h3>1.1.2</h3> <h3>1.1.3</h3> Notice how the number series repeats. I can do autonumbering via CSS - but I can't figure out if there's a way to repeat the numbered series. 回答1: One way would to be use CSS counters and reset them every time a h2 is encountered like in below snippet. The

css counter-increment unwanted reset when skipping :before

由 人盡茶涼 提交于 2019-12-05 06:43:28
Im having a problem with my counter that im using to get numbers before h3, h4 and h5, like a list. The number should only be visible if the tag has class="count", and its only then it should counter-reset for the header below. When i skip showing the number on a h3 the h4s counter gets messed upp, and same for skipping h4. Does anyone have any idea why? body { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h3.count:before { counter-increment: h3; content: counter(h3) ". " } h4.count:before { counter-increment: h4; content: counter(h3) "." counter(h4) ". " } h5.count

Can you count a particular class with CSS?

由 蓝咒 提交于 2019-12-03 06:33:56
问题 Lets say I have a simple list like so: <ol> <li class="count">one</li> <li class="count">two</li> <li class="count">three</li> <li class="count">four</li> <li>blabla</li> <li class="count">five</li> <li class="count">six</li> <li>blabla</li> <li class="count">seven</li> </ol> Now I only want to number list items with the class 'count' So If I add the CSS: li { list-style-type: decimal; } and then remove the list-style-type for list items without the class: li:not(.count) { list-style-type:

Can you count a particular class with CSS?

由 寵の児 提交于 2019-12-02 21:07:48
Lets say I have a simple list like so: <ol> <li class="count">one</li> <li class="count">two</li> <li class="count">three</li> <li class="count">four</li> <li>blabla</li> <li class="count">five</li> <li class="count">six</li> <li>blabla</li> <li class="count">seven</li> </ol> Now I only want to number list items with the class 'count' So If I add the CSS: li { list-style-type: decimal; } and then remove the list-style-type for list items without the class: li:not(.count) { list-style-type: none; } I get this: FIDDLE li { list-style-type: decimal; } li:not(.count) { list-style-type: none; } <ol

A styled ordered list whose nested list should have numbers with letters using CSS counter property

由 故事扮演 提交于 2019-12-02 08:50:21
问题 I want to add a letter to an <li> -element from a my under <ol> like from my question: body { counter-reset: item; } ol.numbered_style li:before { counter-increment:item; margin-bottom:5px; margin-right:10px; content:counter(item); background:blue; border-radius:100%; color:white; width:1.2em; text-align:center; display:inline-block; } ol.numbered_style.start_3{ counter-reset: item 2; } ol.none, ul.none,ol.numbered_style { list-style: none; } <ol class="numbered_style"> <li>first</li> <li

Using CSS counter-reset in :host declaration of a Custom Element

由 淺唱寂寞╮ 提交于 2019-12-02 06:11:01
问题 [run the code snippet] I want my DIV number display to start at 0 , so I want to start the counter at -1 using: counter-reset : square -1; Yet, this setting is ignored when used in :host counter-reset works fine when all DIVs are wrapped in an extra parentDIV (with counter-reset on that parent DIV) But I prefer not to use this work-around as it requires lots more code in my final application. Is it possible at all to use counter-reset in :host ??? window.customElements.define('game-toes',

Using CSS counter-reset in :host declaration of a Custom Element

由 有些话、适合烂在心里 提交于 2019-12-02 02:09:50
[run the code snippet] I want my DIV number display to start at 0 , so I want to start the counter at -1 using: counter-reset : square -1; Yet, this setting is ignored when used in :host counter-reset works fine when all DIVs are wrapped in an extra parentDIV (with counter-reset on that parent DIV) But I prefer not to use this work-around as it requires lots more code in my final application. Is it possible at all to use counter-reset in :host ??? window.customElements.define('game-toes', class extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}) .appendChild

CSS counter on hidden submenu

由 家住魔仙堡 提交于 2019-12-01 22:47:26
I'm trying to make a dropdown menu using nested <ul> , every <li> displaying a number generated with CSS Counters. Sub-menus are hidden with display:none when not hovered. My problem is that counters are not incremented when an element has display set to none . Do you know a CSS property to prevent this? If I replace display: none by visibility: hidden , it's working but I'm not sure if it's nice to use this for my menu, are there any traps? Harry You can mimick the display: none (hidden) behavior by setting the font-size to 0px and this would make the element be counted by the counter

Counter keeps resetting in HTML/CSS

由 旧时模样 提交于 2019-11-30 09:47:25
问题 I am trying to write an electronic book, and I'm having problems with counters for managing chapters/sections/subsections. body { counter-reset: chapter; counter-reset: section; counter-reset: subsection; } h1.chapter::before { counter-reset: section; counter-reset: subsection; counter-increment: chapter; content: "Chapter " counter(chapter) ": "; } h2.section::before { counter-reset: subsection; counter-increment: section; content: "Section " counter(chapter) "." counter(section) ": "; } h3

Use css counter in calc

由 这一生的挚爱 提交于 2019-11-30 08:11:49
问题 I have a list ul>li*5 (not always the same amount). I set a counter for which I get: 1 2 3 4 5 li:nth-child(n):before { counter-increment: skill; content: counter(skill); color: white; } The Question Can I use the counter(skill) inside a calc() or can I add units to it px em rem % ms s I have tried: transition: all 250ms linear #{counter(skill)} * 1s; transition: all 250ms linear counter(skill) * 1s; I want to have the delay increased for example: li 1s delay li 2s delay li 3s delay li 4s
订阅 css-counter