jQuery — First Elements and Focus

Photo by Devin Avery on Unsplash

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:first-child Selector

We can use the :first-child selector to get the first child element.

For example, if we have the following HTML:

<div>
  <span>Glen,</span>
  <span>Jane,</span>
  <span>Ralph</span>
</div>

And the following CSS:

.green {
  color: green
}

Then we can write:

$("div span:first-child")
  .css("text-decoration", "underline")
  .hover(function() {
    $(this).addClass("green");
  }, function() {
    $(this).removeClass("green");
  });

to get the first span in the div with the :first-child selector.

Then we called css to add the underline to the first span.

And finally we add hover to it with hover .

The first callback is called when we hover over the element, and the second one is called when we hover away from it.

:first-of-type Selector

We can use the :first-of-type selector to select all elements that are the first among the siblings with the same element…