CSS – <ol>list-style-type:bold;ではなく::markerを使う

<ol>順序付きリスト要素の数字のみを太字や色などを変更したい場合は::markerと指定することで解決できます。使用例はこちらになります。

CSS

ol li::marker{
	font-weight:bold;
	color:#369;
}
ol li{
	color:gray;
}

HTML

<ol>
	<h3>List</h3>
	<li>1</li>
	<li>2
		<ol>
			<li>2-1</li>
			<li>2-2</li>
			<li>2-3</li>
		</ol>
	</li>
	<li>3</li>
</ol>

上記のように指定してあげることで順序の数字リストとテキスト情報を分けてCSS指定することができるようになります。

ちなみに<ul>でも同じように指定することができます。

HTML

<ul>
	<h3>List</h3>
	<li>1</li>
	<li>2
		<ul>
			<li>2-1</li>
			<li>2-2</li>
			<li>2-3</li>
		</ul>
	</li>
	<li>3</li>
</ul>

CSS

ul li::marker{
	font-weight:bold;
	color:#369;
}
ul li{
	color:gray;
}