Заданные условные элементы в своих родителях

Различия двух представленных селекторов заключается только в том, что :nth-last-of-type() рассматривает позиции элементов в обратном порядке (т. е. с конца).

:nth-of-type() — фильтрующий селектор (отфильтровывает элементы, выбранные с помощью предшествующей части селектора). Фильтрация происходит по следующему принципу:

• Элементы, выбранные по предшествующей части селектора разделяются на группы по общему родителю.
• Внутри каждой группы будут выбираться те из элементов, которые находятся в своей группе на определенных позициях (например четных, или кратных трем, или просто первый встреченный элемент). Эти элементы и станут результатом работы селектора :nth-of-type().

Стоит иметь ввиду, что нумерация позиций начинается не с 0, а с 1!

Параметр arg может принимать следующие значения:

• index — элементы, находящиеся в своей группе на позиции index.
• even — элементы, находящиеся в своей группе на четных позициях.
• odd — элементы, находящиеся на нечетных позициях.
• equation — выражение, описывающее номер позиции элемента. Выражение должно быть целочисленным и зависеть от n. Например 2n+1 соответствует элементам с позициями 1, 3, 5 и далее. 3n+2 соответствует элементам с позициями 2, 5, 8. (чтобы это понять, нужно, вместо n подставлять значения 0, 1, 2 и далее).

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

$('div:nth-of-type(3)')	вернет каждый третий div-элемент, встреченный в своем непосредственном предке.
$('div:nth-of-type(odd)')	вернет каждый нечетный div-элемент, встреченный в своем непосредственном предке.
$('div:nth-of-type(even)')	вернет каждый четный div-элемент, встреченный в своем непосредственном предке.
$('div:nth-of-type(2n+3)')	вернет каждый 2n+3-й div-элемент (5, 7, 9...), встреченный в своем непосредственном предке.

Пример 1

Продемонстрируем как работает :nth-last-of-type() с разными параметрами:

	
~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
  ~lt~meta charset="utf-8"~gt~
  ~lt~title~gt~nth-last-of-type demo~lt~/title~gt~
  ~lt~style~gt~
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  ~lt~/style~gt~
  ~lt~script src="http://code.jquery.com/jquery-1.9.1.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
 
  ~lt~div~gt~
    ~lt~button~gt~:nth-last-of-type(even)~lt~/button~gt~
    ~lt~button~gt~:nth-last-of-type(odd)~lt~/button~gt~
    ~lt~button~gt~:nth-last-of-type(3n)~lt~/button~gt~
    ~lt~button~gt~:nth-last-of-type(2)~lt~/button~gt~
  ~lt~/div~gt~
  ~lt~div~gt~
    ~lt~button~gt~:nth-last-of-type(3n+1)~lt~/button~gt~
    ~lt~button~gt~:nth-last-of-type(3n+2)~lt~/button~gt~
  ~lt~/div~gt~
 
  ~lt~div~gt~
    ~lt~table~gt~
      ~lt~tr~gt~~lt~td~gt~John~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~Karl~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~Brandon~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~Benjamin~lt~/td~gt~~lt~/tr~gt~
    ~lt~/table~gt~
  ~lt~/div~gt~
  ~lt~div~gt~
    ~lt~table~gt~
      ~lt~tr~gt~~lt~td~gt~Sam~lt~/td~gt~~lt~/tr~gt~
    ~lt~/table~gt~
  ~lt~/div~gt~
  ~lt~div~gt~
    ~lt~table~gt~
      ~lt~tr~gt~~lt~td~gt~Glen~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~Tane~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~Ralph~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~David~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~Mike~lt~/td~gt~~lt~/tr~gt~
      ~lt~tr~gt~~lt~td~gt~Dan~lt~/td~gt~~lt~/tr~gt~
    ~lt~/table~gt~
  ~lt~/div~gt~
 
  ~lt~span~gt~Фильтр~lt~span id="inner"~gt~~lt~/span~gt~~lt~/span~gt~
 
  ~lt~script~gt~
    $( "button" ).click(function() {
      var str = $( this ).text();
      $( "tr" ).css( "background", "white" );
      $( "tr" + str ).css( "background", "#ff0000" );
      $( "#inner" ).text( str );
    });
  ~lt~/script~gt~
 
~lt~/body~gt~
~lt~/html~gt~

Ссылки

• Остальные селекторы по расположению элементов в своих родителях
• Список всех селекторов
• $( ) — функция jQuery