HTML Tag Reference

scoped 属性

特定に範囲内にのみスタイルを適用する

scoped 属性は style 要素に指定することで、そのスタイルが特定に範囲内にのみ適用されるべきであることを表します。

この場合、該当する style 要素は、フロー・コンテンツが期待される場所に記述することが可能です。ただし、親要素内でホワイトスペース以外のあらゆるフロー・コンテンツより前、かつコンテンツモデルがトランスペアレント・コンテンツとなる要素の子要素としては使用できないという条件が付きます。

scoped 属性が指定された style 要素で指定されたスタイルは、その親要素内のみに適用されます。@規則で外部スタイルシートを読み込んだ場合も、同じように適用されます。

scoped 属性は HTML Standard では定義されていませんので使用は非推奨です。

scoped 属性の仕様

この属性を使用できる要素

scoped 属性のサンプルソース

<!-- scoped 属性の指定例 -->
<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>サンプルサイト</title>
  <style>
    div {
    border: 2px solid blue;
    margin: 10px;
    }
  </style>
 </head>
 <body>
  <div>
   <div>
    <style scoped="scoped">
     div {
      border: 2px solid red;
     }
     :scope {
      background: #CCC;
     }
    </style>
    <div>foo</div>
   </div>
  </div>
 </body>
</html>
<!-- ↓これは間違った例
     style 要素が親要素内で最初に記述されていません -->
<div>
 <div>
  <div>foo</div>
  <style scoped="scoped">
   div {
    border: 2px solid red;
   }
  </style>
  <div>bar</div>
 </div>
</div>

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。