პსევდოკლასი nth-child
პსევდოკლასი nth-child ირჩევს ელემენტს,
რომელიც არის n-ური შვილი მშობლისა.
სინტაქსი
cssსელექტორი: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-ური შვილი
საკუთარი მშობლისა:
html<ul>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
</ul>cssli:nth-child(4) {
color: red;
}
Результат:
მაგალითი
ახლა წითელს გავაკეთებთ ყველა ლუწ li-ს:
html<ul>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
</ul>cssli:nth-child(even) {
color: red;
}
Результат:
მაგალითი
ახლა წითელს გავაკეთებთ ყველა კენტ li-ს:
html<ul>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
</ul>cssli:nth-child(odd) {
color: red;
}
Результат:
მაგალითი
ახლა წითელს გავაკეთებთ ყოველ მესამე
li-ს (მესამედან დაწყებული):
html<ul>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
<li>სიის ელემენტი</li>
</ul>cssli:nth-child(3n) {
color: red;
}
Результат:
მაგალითი
სელექტორში შესაძლებელია მიუთითოთ ელემენტების დიაპაზონი.
დავუშვათ, გაქვთ სია 20
ელემენტისგან და საჭიროა აირჩიოთ ელემენტები 7-დან
14-მდე ჩათვლით. ეს შესაძლებელია გაკეთდეს
ასე:
html<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>cssli:nth-child(n+7):nth-child(-n+14) {
color: red;
}
Результат: