div要素内にある最初のspan要素に対して下線を付けるなどします。
一方、:firstセレクターで選択された要素に対しては背景を黄色くします。挙動の違いを確認してください。
Selectors/API/jQuery
:first-child
サンプル
サンプル1
<div> <span>John,</span> <span>Karl,</span> <span>Brandon</span> </div> <div> <span>Glen,</span> <span>Tane,</span> <span>Ralph</span> </div>
$("div span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});
$("div span:first")
.css("background-color", "yellow");
[全コードを表示]
[実行結果を単体で表示]