:last-child Selector
Selects all elements that are the last child of their parent.
.last-child()
While .last()
matches only a single element, :last-child
can match more than one: one for each parent.
Find the last span in each matched div and add some css plus a hover state.
JS
<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon,</span>
<span>Sam</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
<span>Ralph,</span>
<span>David</span>
</div>
CSS
span.solast {
text-decoration: line-through;
}
HTML
$("div span:last-child")
.css({ color: "red", fontSize: "80%" })
.hover(
function () {
$(this).addClass("solast");
},
function () {
$(this).removeClass("solast");
}
);
DEMO