リストの項目(<ul> <li>タグ)の先頭記号をネストレベルごとに変更する - CSS

ネストされた ul li リストの先頭記号を変更する場合のCSS記述方法です。

概要

ULタグ内に記述されたULタグのLI要素のスタイルを定義する場合には、スタイルシートに以下の記述をします。
UL UL LI{

同様にULタグ内のULタグ内のULタグのように2段のネストのULタグのLI要素のスタイルを定義する場合は以下の記述をします。
UL UL UL LI{

スタイルシートの記述例

ul li{
  margin-left:0px;
  list-style: none;   
  padding-left: 18px;   
  background-image: url("http://image.ipentec.com/point.png"); 
  background-position: left center;   
  background-repeat:no-repeat;
}
 
ul ul li{
  padding-left: 0px;   
  list-style:square;    
  background-image:none; 
}
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2009-11-14
iPentec all rights reserverd.