CSS3: presentation-level プロパティ - 表示レベル

■ 概要

項　　目説　　明
記述形式 セレクタ {presentation-level: 値 }
値 の形式 same，increment | 整数
初 期 値 0
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 すべての要素
継　　承 する

■ 解説

presentation-levelプロパティ は，要素の表示レベル（EPL）を指定 します。

指定できる値の形式は，以下のとおりです。

値説　　明
整　　数 この要素の表示レベル（EPL）を直接数値で指定します。
increment この要素の表示レベル（EPL）を直前の要素より１増加します。
same この要素の表示レベル（EPL）を直前の要素と同じにします。

■ 使用例（  presentation-level プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
  html { color: black; background: white }
  @media projection {
    h1 { page-break-before: always }
    li { presentation-level: increment }
    :below-level { color: black }
    :at-level { color: red }
    :above-level { color: silver }
  }
-->
</style>
HTML
<body> ～ </body>		 
                                                   EPL value
<h1>Strategies</h1>                                0
<h2>Our strategy</h2>                              0
<ul>                                               0
  <li>divide                                       1
  <li>conquer                                      2
  <p>(in that order)                               2
</ul>
<h2>Their strategy</h2>                            0
<ul>                                               0
  <li>obfuscate                                    1
  <li>propagate                                    2
</ul>

ブラウザー 表示例

Strategies

Our strategy

  • divide
  • conquer

    (in that order)

Their strategy

  • obfuscate
  • propagate

上の例では、<li> 要素の表示レベル（EPL）の値は直前の要素に比較して１ずつ大きくなります。　他の要素の EPL の値は直前の要素と同じ値となっています。

■ 備考

【参考ページ】