Селектор 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 есть ошибка, которая не позволяет этой технике работать.