私がそのような単純なリストを持っているとしましょう:
<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;
}
私はこれを手に入れます:
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で実行できますか?
これは CSS-counters で実行できます
display:none
生成されたコンテンツをカウンターで使用すると、カウンターはそれをスキップし、次のアイテムに進みます!
(編集:または、別の方法として-他の人が指摘したように、特定のクラスを持つ要素でのみカウンターをインクリメントできます- 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>
display: block
を.count
クラスなしのli要素に与えることも機能します。
ul {
list-style-type:decimal;
padding-left: 30px;
}
li:not(.count) {
display: block;
}
古いブラウザの場合:
ul {
list-style-type:decimal;
padding-left: 30px;
}
li {
display: block;
}
li.count {
display: list-item;
}
別の方法として、すべてのli
要素の表示状態を変更する場合は、:after
/:before
疑似クラスをリスト項目として表示して使用します。
CSS 2.1仕様のカウンターセクション には、カスタムカウンターを実装する方法のさまざまな例が含まれています。以下は、非常に単純な例です。
.count
要素).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>
li {
list-style-type: decimal;
}
li:not(.count) {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
これは簡単なハックです http://jsfiddle.net/9w9vkcf3/1/
appearance
プロパティは、ユーザーのオペレーティングシステムのテーマに基づくプラットフォーム固有のスタイルを使用して要素を表示するために使用されます。 ソース
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カウンターを確認することもできます。
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>
参照
どうぞ:
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";
}
これがお役に立てば幸いです