Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Псевдокласс :nth-last-child

Дата:7.12.15 в 18:48
Справочник: 

Характеристики свойства

В каких браузерах работает?

9.0+ 1.0+ 9.6+ 3.1+ 3.6+ 2.1 2.0

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - +

Для чего используется?

Действие псевдокласса аналогично функционалу :nth-child с одним единственным отличием, что отсчет теперь будет вестись не с первого дочернего блока, а с последнего. Принципы указания номера по порядку сохраняются такими же.

Как правильно задавать?

селектор:nth-last-child (порядковый номер или выражение) { ... }

Какие могут быть значения?

  • odd - нечетная нумерация блоков.
  • even - четная нумерация блоков.
  • число - означает номер по порядку элемента, который нужно оформить.
  • выражение - составляет закономерность из комбинацию математических операций, согласно которым определяется нужный элемент.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-child</title>
  <style>
   ul{
	display:block;
	margin:30px auto;
	width:450px;
   }
   li{
	display:inline-block;
	vertical-align:top;
	width:100px;
	height:100px;
	margin-right:50px
   }
   li:nth-last-child(1){
	border-radius:50%;
	background:#4757c8;
	margin-right:0px
   }
   li:nth-last-child(2){
	background:#c8476e;
   }
   li:nth-last-child(3){
	background:#47c3c8;
	-moz-transform: rotate(45deg); /* Для Firefox */
    -ms-transform: rotate(45deg); /* Для IE */
    -webkit-transform: rotate(45deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(45deg); /* Для Opera */
    transform: rotate(45deg);
	width:70px;
	height:70px;
	margin-top: 15px;
   }
  </style>
 </head>
 <body>
  <ul>
	<li></li>
	<li></li>
	<li></li>
  </ul>
 </body>
</html>

По итогу получаем

nth-last-child

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: