webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

jQuery セレクターのまとめ 2

<div id="container">
<dl>
<dt class="top">111</dt><dd class="top">222</dd>
<dt class="middle">333</dt><dd class="middle">444</dd>
<dt class="last">555</dt><dd class="last">666</dd>
</dl>
</div>
<script>
$(function()
{
$("dl>dd").css("color", "red");
});
</script>

セレクタ

  • $("dl>dd").css("color", "red");と記述すると…

f:id:ohta-felica:20160518235103j:plain

 

  • dlの子供のうち、ddだけがもれなく選べる。

ユニバーサルセレクタ

  • $("dl *").css("color", "red");と記述すると、dlの子供全員が選べるはず。
  • ほらね!

f:id:ohta-felica:20160518235541j:plain

隣接セレクタ

  • 隣の要素を指定する。
  • $("dt.middle + dt") と指定すると、dt.middleの次の dt 、つまり「555」が赤くなるはず。 

f:id:ohta-felica:20160519000442j:plain 

  • と思ったけれど、だめでした。隣じゃないと指定できないようです。
  • $("dt.middle + dd")と指定すると…

f:id:ohta-felica:20160519000734j:plain 

  • うまくいきました。