web-dev-qa-db-ja.com

番号付きリストの番号を太字にする方法はありますか？

順序付きリストの数値部分にのみスタイルを付加するCSSセレクターはありますか？

私は次のようなHTMLを持っています：

<ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ol>

出力するもの：

1.a
2.b
3.c

1.、2.、3にする必要があります。bold、a、b、cは通常のままにします。

私は<span>回避策を知っています...

csshtml-lists
53
notnull

カウンターインクリメント

CSS

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

DEMO

86
dcodesmith

約1年後ですが、これは将来ここに来る他の人にとっても興味深いかもしれません。

もう1つの簡単な方法は、リストアイテムのコンテンツを<p>にラップし、<li>を太字に、<p>を通常のスタイルに設定することです。これは、IAの観点からも、特に<li>sにサブリストを含めることができる場合に適しています（テキストノードとブロックレベル要素の混在を避けるため）。

あなたの便宜のための完全な例：

<html>
    <head>
        <title>Ordered list items with bold numbers</title>
        <style>
            ol li {
                font-weight:bold;
            }
            li > p {
                font-weight:normal;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>
                <p>List Item 1</p>
            </li>
            <li>
                <p>Liste Item 2</p>
                <ol>
                    <li>
                        <p>Sub List Item 1</p>
                     </li>
                    <li>
                        <p>Sub List Item 2</p>
                     </li>
                </ol>
            </li>
            <li>
                <p>List Item 3.</p>
            </li>
        </ol>
    </body>
</html>

より一般的なアプローチを好む場合（<li>以外の子孫を持つ<p>sなどの他のシナリオもカバーする場合、li > *の代わりにli > pを使用することもできます。

<html>
    <head>
        <title>Ordered list items with bold numbers</title>
        <style>
            ol li {
                font-weight:bold;
            }
            li > * {
                font-weight:normal;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>
                <p>List Item 1</p>
            </li>
            <li>
                <p>Liste Item 2</p>
                <ol>
                    <li>
                        <p>Sub List Item 1</p>
                     </li>
                    <li>
                        <p>Sub List Item 2</p>
                     </li>
                </ol>
            </li>
            <li>
                <p>List Item 3.</p>
            </li>
            <li>
                <code>List Item 4.</code>
            </li>
        </ol>
    </body>
</html>

（ここでol/li/codeでありol/li/p/codeではないリスト項目4を確認してください。必要な場合は、li > *ではなくセレクタli *を使用してください通常のスタイルブロックレベルの子孫ですが、「foo <strong>bold Word</strong> foo」のようなインラインもありません。

20
Stefan Gentz

JSFiddle：

ol {
    counter-reset: item;
}
ol li { display: block }

ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
}
19
KingKongFrog

ニュースレターの作成中に同様の問題が発生しました。そのため、この方法でスタイルをインライン化する必要がありました。

<ol>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
</ol>
13
Giulio

Bootstrap 4を使用している場合：

<ol class="font-weight-bold">
    <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
    <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
</ol>
3
Ken Avila

これはdcodesmithの答えの更新です https://stackoverflow.com/a/21369918/16682

提案されたソリューションは、テキストが長い場合にも機能します（つまり、行を折り返す必要があります）：pdated Fiddle

グリッドシステムを使用している場合は、次のいずれかを実行する必要があります（少なくとも、これはFoundation 6に当てはまります-Fiddleで再現できませんでした）。

  • box-sizing:content-box;をリストまたはそのコンテナーに追加します
  • またはtext-indent:-2em;を-1.5emに変更します

追伸：これを元の回答の編集として追加したかったのですが、拒否されました。

3
Thomas Landauer

前の回答には、すべてのタイプのリストを数値にする副作用があります。 <ol type="a">は、aではなく1、2、3、4と表示されます。 b。 c。 d。

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

/* Add support for non-numeric lists */

ol[type="a"] > li:before {
  content: counter(item, lower-alpha) ".";
}
ol[type="i"] > li:before {
  content: counter(item, lower-roman) ".";
}

上記のコードは、小文字、小文字のローマ数字のサポートを追加します。執筆時点では、ブラウザは型の大文字と小文字を区別しないため、代替ol型には大文字または小文字しか選択できません。

2
Digits

これは古いことは知っていますが、<li>をまったく使用しない「迅速で汚い」方法もあります。

<!-- <ul> is used for indentation only -->
<ul>
    <p> <b>1.</b> item text </p>
    <p> <b>2.</b> item text </p>
</ul>
0
Alex

また、a、b、cを囲み、CSSのulを太字にすることもできます。

例

ul {
font-weight:bold;
}

<ul><li><span style="font-weight:normal">a</span></li></ul>
0
Lucas Kochek

かなり遅い回答ですが、うまくいけば誰かがこれを役に立つと思うでしょう

私はこのような状況がありました：

  1. リストアイテム

    a。リストアイテム

最初の項目が<strong>である場合、サブ要素は通常の重みであり、「1」です。ただない太字。

私の解決策はjQuery経由でした：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if ($('ol').has('li').has('strong')) {
            $('ol ').css('font-weight', 'bold');
            $('ol > li > ol').css('font-weight', 'normal');
        }
     });
</script>

これが誰かの助けになることを願っています！

0
EGC

新しい::marker疑似要素セレクターが CSS疑似要素レベル4 に追加されました。

ol > li::marker {
  font-weight: bold;
}

残念ながら、現時点では Firefox 68以降でサポート のみです。 （Chrome/Blinkステータスについては Chrome Bug 457718 を参照してください。）

0
Kevinoid