場合によっては、著者がユーザーエージェントに文書ツリーからではないコンテンツをレンダリングさせたいことがあります。よく知られた例としては、番号付きリストがあります。著者は番号を明示的にリスト化したくないが、ユーザーエージェントにそれらを自動的に生成させたいと考えています。同様に、著者は図のキャプションの前に「図」という単語を挿入したり、第7章のタイトルの前に「第7章」と挿入させることを望むことがあります。特に音声または点字では、ユーザーエージェントがこれらの文字列を挿入できるべきです。
CSS 2.2 では、コンテンツは以下の2つのメカニズムによって生成されます:
著者は :before および :after 擬似要素を使用して、生成されたコンテンツのスタイルと位置を指定します。名前が示すように、:before および :after 擬似要素は、要素の文書ツリーの内容の前後にコンテンツを配置することを指定します。'content' プロパティは、これらの擬似要素と組み合わせて、挿入される内容を指定します。
例えば、次のルールは "Note: " という文字列を、"class" 属性が "note" の値を持つすべての P 要素の内容の前に挿入します:
p.note:before { content: "Note: " }
要素によって生成されたフォーマットオブジェクト（例：ボックス）には、生成されたコンテンツが含まれます。したがって、上記のスタイルシートを次のように変更すると:
p.note:before { content: "Note: " }
p.note { border: solid green }
段落全体（初期文字列を含む）の周囲に緑色の実線のボーダーがレンダリングされます。
:before および :after 擬似要素は、関連付けられた文書ツリー内の要素から継承可能なプロパティを継承します。
例えば、次のルールはすべての Q 要素の前に開く引用符を挿入します。引用符の色は赤になりますが、フォントは Q 要素の他の部分と同じになります:
q:before {
content: open-quote;
color: red
}
:before または :after 擬似要素の宣言では、継承されないプロパティは初期値を取ります。
例えば、'display' プロパティの初期値が 'inline' であるため、前の例の引用符はインラインボックス（つまり、要素の初期テキスト内容と同じ行）として挿入されます。次の例では、'display' プロパティを 'block' に明示的に設定し、挿入されたテキストをブロックにします:
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
:before および :after 擬似要素は、関連付けられた要素のすぐ内側に挿入された実際の要素のように他のボックスと相互作用します。
例えば、次の文書断片とスタイルシート:
<p> Text </p> p:before { display: block; content: 'Some'; }
...は、次の文書断片とスタイルシートとまったく同じ方法でレンダリングされます:
<p><span>Some</span> Text </p> span { display: block }
同様に、次の文書断片とスタイルシート:
<h2> Header </h2> h2:after { display: block; content: 'Thing'; }
...は、次の文書断片とスタイルシートとまったく同じ方法でレンダリングされます:
<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
注意。:before および :after が置換要素（例えば HTML の IMG）とどのように相互作用するかについては、この仕様では完全には定義されていません。これについては将来の仕様でより詳細に定義される予定です。
| 名前: | content |
|---|---|
| 値: | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
| 初期値: | normal |
| 適用対象: | :before および :after 擬似要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | すべて |
| 計算値: | 要素上では常に 'normal' に計算されます。:before および :after では、'normal' が指定されている場合 'none' に計算されます。それ以外の場合、URI 値は絶対 URI に、attr() 値は生成された文字列に、その他のキーワードは指定された通りに計算されます。 |
このプロパティは :before および :after 擬似要素とともに使用して、文書内にコンテンツを生成します。値の意味は以下の通りです:
'display' プロパティは、コンテンツがブロックボックスまたはインラインボックスに配置されるかどうかを制御します。
次のルールは、各 H1 要素の前に "Chapter: " という文字列を生成します:
H1:before {
content: "Chapter: ";
display: inline;
}
著者は、新しい行を生成されたコンテンツに含めるために、'content' プロパティの文字列内で "\A" エスケープシーケンスを記述することができます。この挿入された改行は、'white-space' プロパティの影響を受けます。"\A" エスケープシーケンスの詳細は、"文字列"および"文字と大文字小文字"を参照してください。
h1:before {
display: block;
text-align: center;
white-space: pre;
content: "chapter\A hoofdstuk\A chapitre"
}
生成されたコンテンツは文書ツリーを変更しません。特に、文書言語プロセッサ（例：再解析のため）には戻されません。
CSS 2.2では、著者はスタイルに依存し文脈に応じた方法で、ユーザーエージェントが引用符をどのようにレンダリングすべきかを指定できます。'quotes' プロパティは、埋め込み引用の各レベルに対応した引用符のペアを指定します。'content' プロパティはこれらの引用符にアクセスし、引用の前後に挿入させます。
| 名前: | quotes |
|---|---|
| 値: | [<string> <string>]+ | none | inherit |
| 初期値: | ユーザーエージェントに依存 |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
このプロパティは、任意の数の埋め込み引用に対応する引用符を指定します。値の意味は以下の通りです:
例えば、次のスタイルシートを適用します:
/* 2つの言語で2レベルの引用符ペアを指定 */
q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(no) { quotes: "«" "»" '"' '"' }
/* Q要素の内容の前後に引用符を挿入 */
q:before { content: open-quote }
q:after { content: close-quote }
以下のHTML断片に適用すると:
<HTML lang="en">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Quote me!</Q>
</BODY>
</HTML>
ユーザーエージェントは以下を生成できます:
"Quote me!"
一方で、このHTML断片:
<HTML lang="no">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
</BODY>
</HTML>
は以下を生成します:
«Trøndere gråter når "Vinsjan på kaia" blir deklamert.»
注意。 前述の例で'quotes' プロパティで指定された引用符は、コンピューターのキーボードで便利に利用可能ですが、高品質な組版には異なるISO 10646文字が必要です。以下の参考表にはいくつかのISO 10646引用符文字が記載されています:
| 文字 | 近似レンダリング | ISO 10646コード（16進） | 説明 |
|---|---|---|---|
| " | " | 0022 | QUOTATION MARK [ASCII の二重引用符] |
| ' | ' | 0027 | APOSTROPHE [ASCII の単一引用符] |
| ‹ | < | 2039 | SINGLE LEFT-POINTING ANGLE QUOTATION MARK |
| › | > | 203A | SINGLE RIGHT-POINTING ANGLE QUOTATION MARK |
| « | « | 00AB | LEFT-POINTING DOUBLE ANGLE QUOTATION MARK |
| » | » | 00BB | RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK |
| ‘ | ` | 2018 | LEFT SINGLE QUOTATION MARK [single high-6] |
| ’ | ' | 2019 | RIGHT SINGLE QUOTATION MARK [single high-9] |
| “ | `` | 201C | LEFT DOUBLE QUOTATION MARK [double high-6] |
| ” | '' | 201D | RIGHT DOUBLE QUOTATION MARK [double high-9] |
| „ | ,, | 201E | DOUBLE LOW-9 QUOTATION MARK [double low-9] |
引用符は、'open-quote' および 'close-quote' の値を持つ'content' プロパティを使用して文書内の適切な場所に挿入されます。 'open-quote' または 'close-quote' の各出現は、'quotes' プロパティの値に基づき、ネストの深さに応じた文字列の1つに置き換えられます。
'open-quote' は引用符ペアの最初の部分を指し、'close-quote' は2番目を指します。使用される引用符ペアは引用のネストレベルに依存します: 現在の 'open-quote' の出現前のすべての生成されたテキスト内での 'open-quote' の出現回数から、'close-quote' の出現回数を引いた値です。ネストの深さが0の場合は最初のペアが使用され、深さが1の場合は2番目のペアが使用されます。深さがペアの数を超える場合、最後のペアが繰り返されます。深さを負の値にする 'close-quote' または 'no-close-quote' はエラーとなり無視されます（レンダリング時に）。深さは0のままで引用符はレンダリングされません（ただし 'content' プロパティの他の値は引き続き挿入されます）。
注意。 引用の深さはソース文書やフォーマット構造のネストとは無関係です。
一部のタイポグラフィスタイルでは、複数の段落にわたる引用内の各段落の前に開く引用符を繰り返し挿入し、最後の段落にのみ閉じる引用符を付けることが求められます。CSSでは、"見えない"閉じる引用符を挿入することでこれを実現できます。キーワード 'no-close-quote' は引用レベルを減少させますが、引用符は挿入されません。
次のスタイルシートは、BLOCKQUOTE 内の各段落に開く引用符を配置し、最後に1つの閉じる引用符を挿入します:
blockquote p:before { content: open-quote }
blockquote p:after { content: no-close-quote }
blockquote p.last:after { content: close-quote }
これは、最後の段落に "last" クラスがマークされていることに依存します。
対称性のために、'no-open-quote' キーワードもあり、これは何も挿入せず、引用の深さを1増加させます。
CSS 2.2における自動番号付けは、'counter-increment' と'counter-reset' の2つのプロパティによって制御されます。 これらのプロパティで定義されたカウンターは、'content' プロパティの counter() および counters() 関数と共に使用されます。
| 名前: | counter-reset |
|---|---|
| 値: | [ <identifier> <integer>? ]+ | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | すべて |
| 計算値: | 指定通り |
| 名前: | counter-increment |
|---|---|
| 値: | [ <identifier> <integer>? ]+ | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | すべて |
| 計算値: | 指定通り |
'counter-increment' プロパティは、カウンター（識別子）の名前を1つ以上受け取り、それぞれにオプションで整数を続けます。整数は、要素の各出現時にカウンターがどれだけ増加するかを示します。デフォルトの増加値は1です。ゼロおよび負の整数も許可されます。
'counter-reset' プロパティも、1つ以上のカウンター名のリストを含み、それぞれにオプションで整数を続けます。整数は、要素の各出現時にカウンターが設定される値を示します。デフォルトは0です。
'none'、'inherit' および 'initial' というキーワードは、カウンター名として使用してはなりません。'none' 単独の値は、カウンターがリセットまたは増加しないことを意味します。'inherit' 単独の値は通常の意味を持ちます（6.2.1を参照）。'initial' は将来の使用のために予約されています。
この例は、"Chapter 1"、"1.1"、"1.2" などで章やセクションを番号付けする方法を示しています:
BODY {
counter-reset: chapter; /* 章カウンタースコープを作成 */
}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* 章に1を加算 */
}
H1 {
counter-reset: section; /* セクションを0に設定 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
要素がカウンターを増加/リセットし、かつそのカウンターを使用する場合（その :before または :after 擬似要素の'content' プロパティで）、カウンターは増加/リセットされた後に使用されます。
要素がカウンターをリセットし、かつ増加させる場合、カウンターは最初にリセットされ、その後増加されます。
同じカウンターが'counter-reset' および 'counter-increment' プロパティの値で複数回指定されている場合、カウンターの各リセット/増加は指定された順序で処理されます。
次の例は 'section' カウンターを0にリセットします:
H1 { counter-reset: section 2 section }
次の例は 'chapter' カウンターを3増加させます:
H1 { counter-increment: chapter chapter 2 }
'counter-reset' プロパティはカスケードルールに従います。そのため、以下のスタイルシートでは、カスケードにより:
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
'imagenum' だけがリセットされます。両方のカウンターをリセットするには、次のように一緒に指定する必要があります:
H1 { counter-reset: section -1 imagenum 99 }
カウンターは「自己ネスト」であり、子孫要素または擬似要素でカウンターをリセットすると、自動的にそのカウンターの新しいインスタンスが作成されます。これは、HTMLのリストのように、要素が任意の深さで自分自身の中にネストされる可能性がある場合に重要です。各レベルのためにユニークな名前のカウンターを定義するのは不可能です。
したがって、ネストされたリスト項目に番号を付けるには次のように記述するだけで十分です。この結果は、LI要素に 'display:list-item' および 'list-style: inside' を設定した場合と非常に似ています:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
スコープとは、カウンターが最初に'counter-reset'によってリセットされたドキュメント内の最初の要素から始まり、その要素の子孫と、兄弟要素およびその子孫を含みます。ただし、後続の兄弟要素の 'counter-reset' または同じ要素の後続の 'counter-reset' によって作成された同じ名前のカウンターのスコープ内の要素は含まれません。
もし、要素または擬似要素上で'counter-increment' または 'content' が、 いずれの'counter-reset'のスコープにもないカウンターを参照する場合、実装はその要素または擬似要素上でカウンターが0にリセットされたかのように振る舞うべきです。
上記の例では、OLはカウンターを作成し、そのOLのすべての子要素がそのカウンターを参照します。
「item[n]」で「item」カウンターのn番目のインスタンスを、また「{」と「}」でスコープの開始と終了を表すとすると、以下のHTML断片は示されたカウンターを使用します。（上記の例で示されたスタイルシートを想定しています）。
<OL> <!-- {item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item <!-- item[0]++ (=2) -->
<OL> <!-- {item[1]=0 -->
<LI>item</LI> <!-- item[1]++ (=1) -->
<LI>item</LI> <!-- item[1]++ (=2) -->
<LI>item <!-- item[1]++ (=3) -->
<OL> <!-- {item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
<OL> <!-- }{item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[1]++ (=4) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[0]++ (=3) -->
<LI>item</LI> <!-- item[0]++ (=4) -->
</OL> <!-- -->
<OL> <!-- }{item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item</LI> <!-- item[0]++ (=2) -->
</OL> <!-- -->
スコープがネストされていない要素上でカウンターが使用される場合の動作を示す別の例として、以下のマークアップに番号を付けるためのスタイルルールがどのように適用されるかを示します。
<!--"chapter" カウンター|"section" カウンター -->
<body> <!-- {chapter=0 | -->
<h1>About CSS</h1> <!-- chapter++ (=1) | {section=0 -->
<h2>CSS 2</h2> <!-- | section++ (=1) -->
<h2>CSS 2.2</h2> <!-- | section++ (=2) -->
<h1>Style</h1> <!-- chapter++ (=2) |}{ section=0 -->
</body> <!-- | } -->
'counters()' 関数は、スコープ内の同じ名前を持つすべてのカウンターから構成され、指定された文字列で区切られた文字列を生成します。
次のスタイルシートは、ネストされたリスト項目に「1」、「1.1」、「1.1.1」などと番号を付けます。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
デフォルトでは、カウンターは10進数でフォーマットされますが、'list-style-type' プロパティで利用可能なすべてのスタイルもカウンターに使用できます。この記法は以下の通りです:
counter(name)
デフォルトスタイルの場合、または:
counter(name, <'list-style-type'>)
'disc'、'circle'、'square'、および 'none' を含むすべてのスタイルが許可されています。
H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, lower-greek) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
表示されない要素（'display' が 'none' に設定されている場合）は、カウンターを増加またはリセットすることはできません。
例えば、次のスタイルシートでは、クラス "secret" を持つ H2 は 'count2' を増加させません。
H2.secret {counter-increment: count2; display: none}
生成されない擬似要素も、カウンターを増加またはリセットすることはできません。
例えば、次の例では 'heading' は増加しません:
h1::before {
content: normal;
counter-increment: heading;
}
一方で、'visibility' が 'hidden' に設定されている要素は、カウンターを増加します。
CSS 2.2 はリストの基本的な視覚フォーマットを提供します。'display: list-item' を持つ要素は、要素の内容のための主要ブロックボックスを生成し、'list-style-type' および 'list-style-image' の値に応じて、要素がリスト項目であることを示す視覚的なマーカー・ボックスを生成する場合があります。
リストプロパティは、リストの基本的な視覚フォーマットを記述します: それらはスタイルシートがマーカーのタイプ（画像、グリフ、または番号）を指定し、主要ボックスに対するマーカーの位置（外側または内容の前の内側）を指定することを可能にします。ただし、著者がリストマーカーの独自のスタイル（色、フォント、配置など）を指定したり、主要ボックスに対する位置を調整することはできません。これらは主要ボックスに由来します。
背景プロパティは主要ボックスのみに適用されます。'outside' マーカー・ボックスは透明です。
| 名前: | list-style-type |
|---|---|
| 値: | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
| 初期値: | disc |
| 適用対象: | 'display: list-item' を持つ要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
このプロパティは、'list-style-image' が 'none' の値を持つ場合、または URI によって指し示される画像を表示できない場合に、リスト項目マーカーの外観を指定します。'none' の値はマーカーなしを指定し、それ以外の場合は3種類のマーカー（グリフ、番号システム、アルファベットシステム）があります。
グリフは次のように指定されます: disc, circle, および square。その正確なレンダリングはユーザーエージェントに依存します。
番号システムは次のように指定されます:
アルファベットシステムは次のように指定されます:
この仕様はアルファベットシステムがアルファベットの最後でどのようにラップするかを定義しません。例えば、26のリスト項目以降の 'lower-latin' のレンダリングは未定義です。そのため、長いリストの場合、著者が真の番号を指定することを推奨します。
CSS 2.2 はリスト番号付けがどのようにリセットおよび増加されるかを定義しません。これは CSS リストモジュールで定義される予定です [CSS3LIST]。
例えば、次のHTML文書:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>小文字のラテン番号付け</TITLE>
<STYLE type="text/css">
ol { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> これは最初の項目です。
<LI> これは2番目の項目です。
<LI> これは3番目の項目です。
</OL>
</BODY>
</HTML>
は次のような結果を生成する可能性があります:
i これは最初の項目です。 ii これは2番目の項目です。 iii これは3番目の項目です。
リストマーカーの配置（ここでは右揃え）はユーザーエージェントに依存します。
| 名前: | list-style-image |
|---|---|
| 値: | <uri> | none | inherit |
| 初期値: | none |
| 適用対象: | 'display: list-item' を持つ要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 絶対URIまたは'none' |
このプロパティはリスト項目マーカーとして使用される画像を設定します。画像が利用可能な場合、それは'list-style-type' マーカーで設定されたマーカーを置き換えます。
画像のサイズは以下のルールに従って計算されます:
次の例では、各リスト項目の先頭に "ellipse.png" という画像をマーカーとして設定します。
ul { list-style-image: url("http://png.com/ellipse.png") }
| 名前: | list-style-position |
|---|---|
| 値: | inside | outside | inherit |
| 初期値: | outside |
| 適用対象: | 'display: list-item' を持つ要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
このプロパティは、主要ブロックボックスに対するマーカーボックスの位置を指定します。値の意味は以下の通りです:
例えば:
<HTML>
<HEAD>
<TITLE>inside/outside 位置の比較</TITLE>
<STYLE type="text/css">
ul { list-style: outside }
ul.compact { list-style: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>最初のリスト項目
<LI>2番目のリスト項目
</UL>
<UL class="compact">
<LI>最初のリスト項目
<LI>2番目のリスト項目
</UL>
</BODY>
</HTML>
上記の例は次のようにフォーマットされる場合があります:
右から左へのテキストでは、マーカーはボックスの右側に配置されます。
| 名前: | list-style |
|---|---|
| 値: | [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | 'display: list-item' を持つ要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 個別のプロパティを参照 |
'list-style' プロパティは、'list-style-type', 'list-style-image', および 'list-style-position' の3つのプロパティをスタイルシートの同じ場所で設定するための省略記法です。
ul { list-style: upper-roman inside } /* 任意の "ul" 要素 */
ul > li > ul { list-style: circle outside } /* 任意の "ul" は
"li" の子であり、
"ul" 要素の子 */
著者は'list-style' 情報をリスト項目要素（HTMLの "li" など）に直接指定できますが、注意して行うべきです。次の規則は似ていますが、最初のものは子孫セレクターを宣言し、2番目のものは（より具体的な）子セレクターを宣言しています。
ol.alpha li { list-style: lower-alpha } /* 任意の "ol" の子孫 "li" */
ol.alpha > li { list-style: lower-alpha } /* 任意の "ol" の子 "li" */
子孫セレクターのみを使用する著者は、期待する結果を得られない場合があります。次の規則を考えてみてください:
<HTML>
<HEAD>
<TITLE>警告: カスケードによる予期しない結果</TITLE>
<STYLE type="text/css">
ol.alpha li { list-style: lower-alpha }
ul li { list-style: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>レベル1
<UL>
<LI>レベル2
</UL>
</OL>
</BODY>
</HTML>
期待されるレンダリングでは、レベル1のリスト項目には 'lower-alpha' ラベルが付き、レベル2の項目には 'disc' ラベルが付きます。しかし、カスケード順序により、最初のスタイル規則（具体的なクラス情報を含む）が2番目をマスクします。次の規則は代わりに子セレクターを使用して問題を解決します:
ol.alpha > li { list-style: lower-alpha }
ul li { list-style: disc }
もう1つの解決策は、リストタイプ要素のみに'list-style' 情報を指定することです:
ol.alpha { list-style: lower-alpha }
ul { list-style: disc }
継承により、'list-style' の値が OL および UL 要素から LI 要素に転送されます。これがリストスタイル情報を指定する推奨方法です。
URI値は他の値と組み合わせて使用することができます。例えば:
ul { list-style: url("http://png.com/ellipse.png") disc }
上記の例では、画像が利用できない場合 'disc' が使用されます。
'list-style' プロパティ内の 'none' 値は、'list-style-type' および 'list-style-image' が他に指定されていない場合にそれらを 'none' に設定します。しかし、両方が他に指定されている場合、その宣言はエラーとみなされ（したがって無視されます）。
例えば、'list-style' プロパティに 'none' が指定された場合、'list-style-type' と 'list-style-image' の両方が 'none' に設定されます:
ul { list-style: none }
結果として、リスト項目マーカーは表示されません。