პსევდოკლასი nth-of-type

პსევდოკლასი nth-of-type ირჩევს ელემენტს, რომელიც არის მოცემული ტიპის n-ური შვილი.

ანუ, თუ დავწერ h2:nth-of-type(4) - მოიძებნება 4-ური h2 მშობელში (განსხვავებით nth-child-ისგან, რომელიც იპოვის მხოლოდ იმ h2-ს, რომელიც არის მშობელში 4-ური ელემენტი).

სინტაქსი

სელექტორი:nth-of-type(რიცხვი | odd | even | გამოსახულება){

}

მნიშვნელობები

მნიშვნელობა	აღწერა
რიცხვი	დადებითი რიცხვი `1`-დან. განსაზღვრავს ელემენტის ნომერს, რომელსაც გვინდა მივმართოთ. ელემენტების ნუმერაცია იწყება `1`-დან.
`odd`	კენტი ელემენტები.
`even`	ლუწი ელემენტები.
გამოსახულება	შესაძლებელია სპეციალური გამოსახულებების შედგენა ასო n-ის გამოყენებით, რომელიც აღნიშნავს ყველა მთელ რიცხვს ნულიდან (არა ერთიდან) უსასრულობამდე. ასე რომ, `2n` - ნიშნავს ყველა ლუწ რიცხვს (მეორედან დაწყებული). როგორ გავიგოთ ეს? ჩავსვათ `n`-ში თანმიმდევრულად რიცხვები `0`-დან და შემდგომ: თუ n = 0, მაშინ 2n მისცემს 0-ს - ასეთი ელემენტი არ არსებობს (ელემენტების ნუმერაცია 1-დან), თუ n = 1, მაშინ 2n მისცემს 2-ს - მეორე ელემენტი, თუ n = 2, 2n მისცემს 4-ს - მეოთხე ელემენტი. თუ დაწერ 3n - ეს იქნება ყოველი მესამე ელემენტი (მესამედან დაწყებული), და ა.შ.

მაგალითი

ვიპოვოთ h2, რომელიც არის მშობელში 2-ური h2:

<div>
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
</div>

h2:nth-of-type(2) {
	color: red;
}

მაგალითი

ვიპოვოთ ყველა ლუწი h2:

<div>
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
</div>

h2:nth-of-type(even) {
	color: red;
}

მაგალითი

ვიპოვოთ ყველა კენტი h2:

<div>
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
	
	<h2>სათაური</h2>
	<p>აბზაცი</p>
</div>

h2:nth-of-type(odd) {
	color: red;
}