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

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

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

Главное отличие jQuery селектора :only-child от jQuery селектора :only-of-type, заключается в том, что при использовании :only-of-type учитывается количество элементов одного типа, а при использовании jQuery селектора :only-child количество элементов (независимо каких типов).

jQuery синтаксис:

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

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

Селектор в CSS

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

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

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

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

В этом примере с использованием селектора :only-of-type мы выбираем все элементы <p> в документе, которые являются единственными дочерними элементами определённого типа внутри своего родительского элемента.

В нашем случае в роли родительских элементов выступают элементы <div>, и только первый из них содержит внутри себя единственный элемент <p> определённого типа, второй блок содержит два элемента такого типа.