: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

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)