web-dev-qa-db-ja.com

CSSで特定のクラスを数えることはできますか？

私がそのような単純なリストを持っているとしましょう：

<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>

ここで、クラス「count」のリストアイテムのみに番号を付けたい

CSSを追加すると：

li {
    list-style-type: decimal;
}

次に、クラスのないリストアイテムのリストスタイルタイプを削除します。

li:not(.count) {
    list-style-type: none;
}

私はこれを手に入れます：

[〜＃〜] fiddle [〜＃〜]

li {
  list-style-type: decimal;
}
li:not(.count) {
  list-style-type: none;
}
<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>

ここで明らかな問題は、クラスのないリストアイテムもここで「カウント」され、表示されないことです。

したがって、上記の例では、リストの番号を7にする必要があります。クラスなしのリスト項目はスキップされます。これはCSSで実行できますか？

htmlcsshtml-listscss-counter
32
Danield

これは CSS-counters で実行できます

display:none生成されたコンテンツをカウンターで使用すると、カウンターはそれをスキップし、次のアイテムに進みます！

[〜＃〜] fiddle [〜＃〜]

（編集：または、別の方法として-他の人が指摘したように、特定のクラスを持つ要素でのみカウンターをインクリメントできます- likeそう ）

ol {
  counter-reset: count;
  list-style-type: none;
  padding-left: 30px;
}
li:before {
  content: counter(count)".";
  counter-increment: count;
}
li:not(.count) {
  padding-left: 13px;
}
li:not(.count):before {
  display: none;
}
<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>

したがって、実際には、カウンターを使用すると、クラスをカウントできるだけでなく、セレクターの任意の組み合わせもカウントできます。

以下は、概念実証のための 例 です。

html {
  counter-reset: divs;
}
body {
  counter-reset: paragraphs;
  position: relative;
}
div {
  counter-increment: divs;
}
.wpr {
  counter-reset: count-me;
  position: relative;
}
.container {
  position: relative;
  border-bottom: 1px solid green;
}
.container .count-me {
  counter-increment: count-me;
}
.container p {
  counter-increment: paragraphs;
}
.wpr:after {
  content: "Number of count-me classes in container:" counter(count-me);
  position: absolute;
  bottom: -20px;
}
.container:after {
  content: "Number of paragraphs:" counter(paragraphs);
  position: absolute;
  bottom: -40px;
}
body:after {
  content: "Number of divs:" counter(divs);
  position: absolute;
  bottom: -60px;
}
<div class="wpr">div1
  <div class="container">div2
    <div>div3
      <span class="count-me">count-me</span>
    </div>
    <div>div4
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div5
      <p>I"m a paragragh</p>
    </div>
    <div>div6
      <span class="count-me">count-me</span>
    </div>
    <div>div7
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div8</div>
  </div>
</div>
34
Danield

display: blockを.countクラスなしのli要素に与えることも機能します。

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li:not(.count) {
    display: block;
}

Working Fiddle

古いブラウザの場合：

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li {
    display: block;
}
li.count {
    display: list-item;
}

Working Fiddle

別の方法として、すべてのli要素の表示状態を変更する場合は、:after/:before疑似クラスをリスト項目として表示して使用します。

Working Fiddle

9
Mr_Green

CSS 2.1仕様のカウンターセクション には、カスタムカウンターを実装する方法のさまざまな例が含まれています。以下は、非常に単純な例です。

  1. カウンター変数を定義する
  2. 特定の要素に対してそれをインクリメントします（あなたの場合、それは.count要素）
  3. 擬似要素内に表示します
.custom-counter {
  /* define a counter variable */
  counter-reset: clumsycount 0;
  /* style */
  list-style-type: none;
}
.custom-counter .count {
  /* increment the counter variable */
  counter-increment: clumsycount 1;
  /* style */
  position: relative;
  background-color: #EEE;
}
.custom-counter .count:before {
  /* display the counter variable */
  content: counter(clumsycount) ".";
  /* style */
  position: absolute;
  top: 0;
  right: 100%;
  padding-right: .25em;
  background-color: #CCC;
}
<ul class="custom-counter">
  <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>
</ul>
3
Salman A
li {
    list-style-type: decimal;
}

li:not(.count) {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
}

これは簡単なハックです http://jsfiddle.net/9w9vkcf3/1/

appearanceプロパティは、ユーザーのオペレーティングシステムのテーマに基づくプラットフォーム固有のスタイルを使用して要素を表示するために使用されます。 ソース

3
xorxor

HTMLを使用して、リストアイテムの値を具体的に設定できます。

<ul>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li value="5" class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li value="7" class="count">seven</li>
</ul>

http://jsfiddle.net/03bu5sct/1/

純粋なCSSソリューションが必要な場合は、CSS3カウンターを確認することもできます。

3
Chris Wheeler

1つの解決策は、 CSSカウンター を使用し、疑似要素 ：beforecontent カウンター付きのプロパティを進め、

カウンターは、「counter（）」または「counters（）」の2つの異なる関数で指定できます。前者には2つの形式があります： 'counter（name）'または 'counter（name、style）'。生成されたテキストは、この疑似要素のスコープ内の指定された名前の最も内側のカウンターの値です。指定されたスタイル（デフォルトでは「10進数」）でフォーマットされます。後者の関数には、「counters（name、string）」または「counters（name、string、style）」という2つの形式もあります。生成されたテキストは、指定された文字列で区切られた最外部から最内部まで、この疑似要素でスコープ内の特定の名前を持つすべてのカウンターの値です。カウンターは指定されたスタイル（デフォルトでは「10進数」）でレンダリングされます。詳細については、自動カウンターと番号付けのセクションを参照してください。名前は、「なし」、「継承」、または「初期」であってはなりません。そのような名前は宣言を無視させます。

クラスliのcount要素のみ：

body {
  counter-reset: section;/* Set the section counter to 0 */
}
ol {
  list-style-type: none;
}
li.count::before {
  counter-increment: section;/* Increment the section counter*/
  content: counter(section)". ";/* Display the counter */
}
<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>

参照

counter-increment

カウンターリセット

1
Alex Char

どうぞ：

https://jsfiddle.net/Cheese1991/qnmhvvxj/

HTML：

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>

CSS：

ul {
    counter-reset:yourCounter;
    list-style:none;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ". ";
}
ul li.skip:before {
    content:"\a0\a0\a0";
}

これがお役に立てば幸いです

0
Cheese