:first-child Selector
Selects all elements that are the first child of their parent.
.first-child()
While .first() matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).
Finds the first span in each matched div to underline and add a hover state.
JS
<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
<span>Ralph</span>
</div>
CSS
span {
color: #008;
}
span.sogreen {
color: green;
font-weight: bolder;
}
HTML
$("div span:first-child")
.css("text-decoration", "underline")
.hover(
function () {
$(this).addClass("sogreen");
},
function () {
$(this).removeClass("sogreen");
}
);
DEMO