
リストの行頭記号の色だけを変更する
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; }