პსევდოკლასი nth-last-of-type
პსევდოკლასი nth-last-of-type არჩევს
ელემენტს, რომელიც არის n-ური მშობლის შვილი
მოცემული ტიპის, დათვლა ბოლოდან.
მოქმედებს nth-of-type-ის მსგავსად,
მხოლოდ დათვლა მიმდინარეობს ბოლოდან.
სინტაქსი
cssსელექტორი:nth-last-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
მშობელში ბოლოდან:
html<div>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
</div>cssh2:nth-last-of-type(2) {
color: red;
}
Результат:
მაგალითი
ვიპოვოთ ყველა ლუწი h2 ბოლოდან:
html<div>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
</div>cssh2:nth-last-of-type(even) {
color: red;
}
Результат:
მაგალითი
ვიპოვოთ ყველა კენტი h2 ბოლოდან:
html<div>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
<h2>სათაური</h2>
<p>აბზაცი</p>
</div>cssh2:nth-last-of-type(odd) {
color: red;
}
Результат: