:header【見出し要素 セレクタ】
:root【ルート要素 セレクタ】
メモ
- 特定要素を選択
- ":header":見出し要素 (HTML5:<h1>~<h6>【見出し】)
- ":root":ドキュメント ルート要素 (HTMLでは通常、HTML5:<html>【ルート要素】)
- パフォーマンス (:header)
- ネイティブ DOM querySelectorAll() 未使用の為、低速
純粋なCSSセレクタを使用後、.filter(":header")
を使用した方が高速
- ネイティブ DOM querySelectorAll() 未使用の為、低速
構文
jQuery( ":header" ) 1.2
jQuery( ":root" ) 1.9
関連
- jQuery リファレンス メモ
- CSS リファレンス メモ
- :root【文書のルート要素】
- jQuery (英語)
例
<section id="id1">
<h5>見出し (h5)</h5>
<p>内容</p>
<h6>見出し (h6)</h6>
<p>内容</p>
</section>
<script>
$("#id1 :header").css("background-color", "lightblue");
</script>
見出し (h5)
内容
見出し (h6)
内容
<section id="id2">
<h5>見出し (h5)</h5>
<p>内容</p>
<h6>見出し (h6)</h6>
<p>内容</p>
</section>
<script>
$("#id2 *").filter(":header").css("background-color", "lightgreen");
</script>
見出し (h5)
内容
見出し (h6)
内容
<p id="output"></p>
<script>
var msg = "ルートタグ:" + $( ":root" )[ 0 ].nodeName;
$( "#output" ).html( msg );
</script>