リストの項目(<ul> <li>タグ)の先頭記号をネストレベルごとに変更するコードと表示結果

ネストされた ul li リストの先頭記号を変更する場合のCSSのコードと表示結果です。

概要

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

UL LI UL LI{

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

UL LI UL LI UL LI{

スタイルシートの記述例

ul li{
  margin-left:0px;
  list-style: disc;  
  padding-left: 18px;
}
 
ul li ul li{
  padding-left: 0px;   
  list-style: square;    
}

実施例

コード

以下のHTMLファイルとCSSを作成します。

ul {
  margin-left: 0px;
  list-style: none;
  padding-left: 18px;
}

  ul li::marker {
    content: "★";
  }

  ul li ul li {
    padding-left: 0px;
    list-style: none;
  }

  ul li ul li::marker {
    content: "◎";
  }

表示結果

上記のHTMLをWebブラウザで表示すると下図のページが表示されます。 リストの項目マークが変更できています。

スタイルシートで何も指定しない場合は下図の表示となります。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。