Селектор CSS для n-го диапазона?

Как я могу настроить селектор CSS ниже:

.myTableRow td:nth-child(?){
background-color: #FFFFCC;
}

поэтому он применяется к столбцам td 2-4?

<table>
<tr class="myTableRow">
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</table>

Ответ 1

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

.myTableRow td:nth-child(n+2):nth-last-child(n+2){
background-color: #FFFFCC;
}

В качестве альтернативы вместо использования формулы просто исключите :first-child и :last-child:

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}

Ответ 2

Еще один подход, который вы можете использовать:

.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}

Это немного яснее, потому что он включает числа в вашем диапазоне (2 и 4) вместо того, чтобы рассчитывать назад с конца.

Он также немного более надежный, потому что вам не нужно учитывать общее количество элементов.

Для пояснения:

:nth-child(n+X)     /* all children from the Xth position onward */
:nth-child(-n+x)    /* all children up to the Xth position       */

Пример:

#nn div {
    width: 40px;
    height: 40px;
    background-color: black;
    display: inline-block;
    margin-right: 10px;
}

#nn div:nth-child(n+3):nth-child(-n+6) {
    background-color: blue;
}

<div id="nn">
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Ответ 3

Если вы хотите выбрать элементы со 2 по 4, вот как вы можете это сделать:

td:nth-child(-n+4):nth-child(n+2) {
  background: #FFFFCC;
}

Напомним, что последовательность селекторной последовательности должна быть от наибольшей к наименьшей. В Safari есть ошибка, которая не позволяет этой технике работать.