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

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

სინტაქსი

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

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

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

მაგალითი

ამ მაგალითში ჩვენ წითელ ფერს გავაკეთებთ იმ li-ს, რომელიც არის 4-ური შვილი საკუთარი მშობლისა:

<ul>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
</ul>

li:nth-child(4) {
	color: red;
}

მაგალითი

ახლა წითელს გავაკეთებთ ყველა ლუწ li-ს:

<ul>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
</ul>

li:nth-child(even) {
	color: red;
}

მაგალითი

ახლა წითელს გავაკეთებთ ყველა კენტ li-ს:

<ul>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
</ul>

li:nth-child(odd) {
	color: red;
}

მაგალითი

ახლა წითელს გავაკეთებთ ყოველ მესამე li-ს (მესამედან დაწყებული):

<ul>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
</ul>

li:nth-child(3n) {
	color: red;
}

მაგალითი

სელექტორში შესაძლებელია მიუთითოთ ელემენტების დიაპაზონი. დავუშვათ, გაქვთ სია 20 ელემენტისგან და საჭიროა აირჩიოთ ელემენტები 7-დან 14-მდე ჩათვლით. ეს შესაძლებელია გაკეთდეს ასე:

<ol>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
	<li>სიის ელემენტი</li>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}