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 жазсак - бул ар бир үчүнчү элемент (үчүнчүдөн баштап) болот, жана ушу сыяктуу.

Мисал

Бул мисалда биз кызыл түстү ата-энесинин аягынан эсептелген 4-чү уулу болгон liге белебиз:

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;
}

Результат: