jQuery селектор :first-of-type

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

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

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

jQuery синтаксис:

$("selector:first-of-type")

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

Селектор в CSS

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

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

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

index.html

HTML

<div>
  <h2>Заголовок внутри блока</h2>
  <p>Первый абзац внутри блока</p>
  <p>Второй абзац внутри блока</p>
</div>
<div>
  <h2>Заголовок внутри блока</h2>
  <p>Первый абзац внутри блока</p>
  <p>Второй абзац внутри блока</p>
</div>

main.js

JavaScript

$(document).ready(function () {
    $('p:first-of-type').css('color', 'green') // выбираем каждый элемент <p>, который является первым дочерним элементом определенного типа внутри родительского элемента.
})

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%;
}

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