jQuery селектор :nth-last-of-type

Определение и применение

jQuery селектор :nth-last-of-type выбирает каждый элемент, который является дочерним элементом своего родительского элемента, считая от последнего дочернего элемента.

jQuery селектор :nth-last-of-type работает, как и jQuery селектор :nth-last-child, но применяется к чередующимся дочерним элементам определенного типа, а не к элементу с любым типом.

jQuery синтаксис:

$("selector:nth-last-of-type(номер | ключевое слово | формула)")

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

• even (четные элементы определенного типа, считая от последнего дочернего элемента)
• odd (нечетные элементы определенного типа, считая от последнего дочернего элемента)

Селектор :nth-last-of-type() позволяет выбрать не только чётные, нечетные, или дочерние элементы определенного типа (считая от последнего дочернего элемента), но и дочерние элементы определенного типа, заданные по элементарной математической формуле:

$("td:nth-last-of-type(4n+2)")

Этот селектор означает, что каждая четвёртая ячейка данных таблицы (<td>) внутри строки, начиная со второй ячейки данных таблицы, считая от последнего дочернего элемента, будет выбрана:

• 4n – каждый четвертый элемент определенного типа, считая от последнего дочернего элемента.
• 2 – с какого элемента определенного типа, считая от последнего дочернего элемента начинать.

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:

$("td:nth-last-of-type(4n-1)")

Этот селектор означает, что каждая четвёртая ячейка данных таблицы (<td>) внутри строки, начиная с третьей ячейки данных таблицы (порядкового номера -1 нет по объективным причинам, поэтому происходит сдвиг), считая от последнего дочернего элемента, будет выбрана:

• 4n – каждый четвертый элемент определенного типа, считая от последнего дочернего элемента.
• -1 – с какого элемента определенного типа, считая от последнего дочернего элемента начинать.

Добавлен в версии jQuery

Селектор в CSS

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

Пример использования jQuery селектора :nth-last-of-type()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<div class="control">
  <button>:nth-last-of-type(2)</button>
  <button>:nth-last-of-type(3)</button>
  <button>:nth-last-of-type(even)</button>
  <button>:nth-last-of-type(odd)</button>
  <button>:nth-last-of-type(3n)</button>
  <button>:nth-last-of-type(3n+1)</button>
  <button>:nth-last-of-type(3n+2)</button>
  <button>:nth-last-of-type(3n-1)</button>
  <button>:nth-last-of-type(3n-2)</button>
</div>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>
<div class="info"></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        var str = $(this).text()
        $('td').css('background', '#fff')
        $('td' + str).css('background', 'orange')
        $('.info').text('$("td' + str + '")')
    })
})

style.css

CSS

.control {
    width: 25%;
    float: left;
}
button {
    display: block;
}
.info {
    font-weight: bold;
    margin-top: 2em;
}
td {
    border: 1px solid green;
    width: 50px;
}

В этом интерактивном примере с использованием селектора :nth-last-of-type выбираем и стилизуем элементы <td> (ячейка данных) в зависимости от их размещения (элементы определенного типа, которые является дочерним элементами своих родительских элементов, считая от последнего дочернего элемента). Для демонстрации работы необходимого селектора нажмите на кнопку (элемент <button>), текст, которой выступает в роли значения селектора:

Выбор ячеек данных таблицы по элементарной математической формуле, считая от последнего дочернего элемента: