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

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

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

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

scoped 属性は、2014年 4月 29日に公開された勧告候補 (HTML5 W3C Candidate Recommendation 04 February 2014) で一旦仕様から削除され、HTML5.1 仕様に移動されました。

サンプルソースを見る

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>