jQuery селектор :first-child

Определение и применение

jQuery селектор :first-child выбирает каждый элемент, который является первым дочерним элементом своего родителя.

Для того, чтобы выбрать элемент, который является первым элементом в документе, вы можете воспользоваться jQuery селектором :first.

jQuery синтаксис:

JavaScript

$("selector:first-child")

Добавлен в версии jQuery

1.1.4

Селектор в CSS

CSS псевдокласс :first-child.

Пример использования

Селектор :first-child — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<ul>
  <li>Первый элемент первого списка</li>
  <li>Второй элемент первого списка</li>
  <li>
    Третий элемент первого списка
    <ul>
      <li>Первый элемент второго списка</li>
      <li>Второй элемент второго списка</li>
      <li>
        Третий элемент второго списка
        <ul>
          <li>Первый элемент третьего списка</li>
          <li>Второй элемент третьего списка</li>
          <li>Третий элемент третьего списка</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

main.js

JavaScript

$(document).ready(function () {
    $('tr:even').css('color', 'red') // выбираем каждый элемент <li>, который является первым дочерним элементом своего родителя в документе
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery селектора :first-child мы выбрали каждый элемент <li> (элемент списка), который является первым дочерним элементом своего родителя в документе.