NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

リストの行頭記号の色だけを変更する

2015年2月5日jQueryのみでつくるギミック

リストの行頭記号の色だけを変更する

比較的手間を増やさずに、jQueryを使用してリスト(ol,ul)の行頭記号の色だけ変更します。

デモページ

JavaScript

(function($){
	$(function() {		
		$('#list li').wrapInner('<span></span>');
	});
})(jQuery);

HTML

<ul id="list">
	<li>list01</li>
	<li>list02</li>
	<li>list03</li>
</ul>

CSS

#list {
	width: 40px;
	margin: 0 auto;
	font-size: 16px;
}
#list li {
	list-style-type: disc;
	margin-bottom: 5px;
	color: #ff5b6b;
}
#list li span {
	color: #5d5d5d;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. リストの行頭記号の色だけを変更する

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com