web-dev-qa-db-ja.com

CSSカウンターを指定されたリストのstart属性にリセットするにはどうすればよいですか？

セルフスタイルの番号付きリストを使用しています。 start-attributeを読み取り、CSSを使用してカウンターに追加するにはどうすればよいですか？

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;

    /* this does not work like I expected */
    counter-reset: lis attr(start, number, 0);

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

[〜＃〜]フィドル[〜＃〜]

csshtml-listscss-counter
16
Möhre

属性startをフィルターとして使用できます：

_ol[start="10"] {
   counter-reset: lis 9;
}
_

デモ、ただしこれはこのol属性にのみ適用されます。適用する属性値を取得し、正しい_counter-reset_を生成するには、JavaScriptが必要になります。

_<ins data-extra="Use of Scss">
_

これを参照してください：[〜＃〜] demo [〜＃〜]これらの行から100個のルールを生成します：

_@for $i from 1 through 100 {
  .ol[start="#{$i}"] {
    counter-reset: lis $i ;
  }
}
_

次に、Scssがホスティングで利用できない場合に生成されたルールをコピーして貼り付けます。

_</in>
_

_<ins data-extra="jQueryFix">_：

JQueryソリューションは簡単にセットアップできます：[〜＃〜] demo [〜＃〜]

_$( "ol" ).each(function() {
  var   val=1;
    if ( $(this).attr("start")){
  val =  $(this).attr("start");
    }
  val=val-1;
 val= 'lis '+ val;
$(this ).css('counter-increment',val );
});
_

注意：$(this ).css('counter-reset',val );も機能します：）

._</ins>_

8
G-Cyr

これは古い質問だと思いますが、まだ誰かを助けるためにここに置いています。

Cssカウンターのプロパティで属性を読み取ることはできません。代わりに、インラインcssをcounter-resetとともに使用して、特定のリストの開始番号を定義できます。
（はい、インラインcssを使用することはベストプラクティスではないことはわかっていますが、このようなEdgeの場合に使用できます。

最初の項目はリセット値を1ずつインクリメントするため、カウンター名を指定するだけでなく、リストを開始する数を1で引く必要があります。

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>

<!-- NOTE: List numbering starts at counter-reset + 1 -->
<ol style="counter-reset: lis 9;">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;
    counter-reset: lis; /* Resets counter to zero unless overridden */
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

FIDDLE（http://jsfiddle.net/hcWpp/308/）

4
BRN

単に追加します：

ol:not(:nth-of-type(1)){
    counter-increment: lis 10;
}

デモフィドル

残念ながら、counter-resetでattrを使用することはできませんが、ルールを追加して増分量を変更することはできます。

代替1

複数のリストを作成する場合、より復元力のあるバージョンは次のようになります。

ol {
    list-style-type: none;
    /* this does not work like I expected */
    counter-reset: lis;

}
ol:not(:first-of-type){
     counter-increment: ol
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}
ol:not(:first-of-type) li:before {
    content: counter(ol) counter(lis)". ";
    color: red;
}

代替2

数字の接頭辞が何でもかまいませんが、以下はこれに備えています。

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol>
    <li data-prefix="1">Number Ten</li>
    <li data-prefix="1">Number Eleven</li>
    <li data-prefix="1">Number Twelve</li>
</ol>
<ol>
    <li data-prefix="a">Number Ten</li>
    <li data-prefix="b">Number Eleven</li>
    <li data-prefix="c">Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;
    counter-reset: lis;
}
li {
    counter-increment: lis
}
li:before {
    content: attr(data-prefix) counter(lis)". ";
    color: red;
}
3
SW4

私が忘れていた古い質問に戻ります。

今日では、使用できる CSSカスタムプロパティ がありますそれでも、style属性の横にstart属性を追加する必要があります

カスタムプロパティ（CSS変数またはカスケード変数と呼ばれることもあります）は、ドキュメント全体で再利用される特定の値を含む、CSS作成者によって定義されたエンティティです。これらはカスタムプロパティ表記（例：-main-color：black;）を使用して設定され、var（）関数（例：color：var（-main-color）;）を使用してアクセスされます。

例（コードが生成された場合、間違いを避けるために_start=x_とvar(--s:x)の両方の値を同じに設定する方が簡単なようです）：

_ol {
    list-style-type: none;
    /* this does not work like I expected
    counter-reset: lis attr(start, number, 0); */
    
    /* update using the css varaiable from html */
    counter-reset: lis calc(var(--s) - 1) ;
    /* calc() is used to keep html attributes values coherent */

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}_
_<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10" style="--s:10"><!-- or set it right away to nine to get rid of calc() in the css rule-->
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>
<ol start="30" style="--s:30"><!-- or set it right away to twenty nine to get rid of calc() in the css rule -->
    <li>Number Thirty</li>
    <li>Number Thirty one</li>
    <li>Number Thirty two</li>
</ol>_

それは答えになるには遠いですが、これから他の誰にとっても役立つかもしれません。

2
G-Cyrillus

GCyrillusJSソリューションの合理化されたバージョンを提供するだけです

$('ol[start]').each(function() {
    var val = parseFloat($(this).attr("start")) - 1;
    $(this).css('counter-increment','lis '+ val);
});

CSSがHTML属性から数値を読み取って使用できることを望みます:(

2
Daniel Tonon

Firefoxでカウンターリセットが有効になっている場合でも<olstart = "10">をサポートするには：

$('ol[start]').each(function() {
    var val = parseFloat($(this).attr("start"));
    $(this).find("li").first().attr("value", val);
});

jQueryスクリプトは、DanielTononの入力に基づいています。

0
Nubian