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

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

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

Обращаю Ваше внимание на то, что отличие jQuery селектора :first-of-type от :first-child заключается в том, что он выбирает первый дочерний элемент определенного типа, а не первый дочерний элемент этого типа.

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

jQuery синтаксис:

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

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

1.9

Селектор в CSS

CSS псевдокласс :first-of-type css3

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора :first-of-type</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $("p:first-of-type").css("color", "green"); // выбираем каждый элемент <p>, который является первым дочерним элементом определенного типа внутри родительского элемента.
	});
		</script>
	</head>
	<body>
		<div>
			<h2>Заголовок внутри блока</h2>
			<p>Первый абзац внутри блока</p>
			<p>Второй абзац внутри блока</p>
		</div>
		<div>
			<h2>Заголовок внутри блока</h2>
			<p>Первый абзац внутри блока</p>
			<p>Второй абзац внутри блока</p>
		</div>
	</body>
</html>

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

Результат нашего примера:

Пример использования jQuery селектора :first-of-type. — Пример использования jQuery селектора :first-of-type

jQuery селекторы