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

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

სინტაქსი

cssსელექტორი:nth-last-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-last-child(4) {
  color: red;
}

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат: