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

webかたつむり

WEB制作会社のフォトグラファー

jQuery セレクターのまとめ 3

擬似クラス

  • これまでは、放置していた言葉の定義をこの辺りできちんと理解しておきたいところですが…
  • いったい、要素に対する「擬似クラス」とは、なにか?
  • 要素の、状況に応じたクラス分け。定まっていない、状況に対するクラス分け。
  • 正式なクラスは「.(ピリオド)」、擬似クラスは「:(コロン)」
  • しっかりと名前が付いている、(親子の、孫の)関係性が明確に規定されている、隣の(これは微妙だな…)とかは、クラス。
  • やっぱり分からなくなってきたな…まぁいいか。

<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:nth-child(3)).css("color", "red");
});
</script>

:first-child, :last-child, :nth-child(), :nth-last-child(), only-child

  • なぜに、子供なのか?という疑問がいま解決しました。
  • 子要素、に対する選択なのですね。
  • ちなみに、$(dt:nth-child(2)).css("color", "red"); のように記述すると、

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

  • dt の親は、dl 。dl の2番めの子要素は dd ではないので、指定ができません。
  • そして、$(dt:nth-child(3)).css("color", "red");とすると、

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

  • dl の、3番目の子供が dt なので、「333」が指定できます。
  • めんどくさ