W3G

list-style-imageプロパティの値

値は "url()" の形式で括弧内に画像の所在となる URI を指定します。また、画像を指定しないことを示す "none" のキーワードを指定することもできます

リスト項目のマーカーの形状を指定する list-style-typeプロパティの値に "none" 以外のキーワードが指定されている場合、行頭のマーカー部分には、list-style-typeプロパティで指定された形状よりも list-style-imageプロパティによる画像が優先されて表示されます。ただし、何らかのトラブルで画像が表示できない場合や画像の表示に対応していない・あるいは表示しない設定にしている環境においては、list-style-typeプロパティで指定された形状が代替で表示されます。

list-style-imageプロパティの実装状況

IE

◯

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

サンプル

ul        { list-style-image : url(image1.gif) ; }
ul ul    { list-style-image : url(image2.gif) ; }
ul ul ul { list-style-image : url(image3.gif) ; }

list-style-imageプロパティは子要素に継承されるので、適用対象の li要素以外の親要素に list-style-imageプロパティが指定されている場合でも、その指定は、子要素の li要素へと継承されることになります。なお、CSS2 仕様では、直接適用対象となる li要素をセレクタとするのではなく、親要素の ul要素や ol要素をセレクタとして、継承させる形で指定することが推奨されています。