Применение CSS к первому и последнему TH таблицы

Question

Мне нужно применить стили для первой и последней таблицы ниже, используя jQuery, написал какой-то скрипт, который не запускается ..

 <script>$("th:gt(0)").css("border-left", "none");</script>

 <table>
 <tr>
  <th scope="col">one</th>
  <th scope="col">two</th>
  <th scope="col">three</th>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

Любая помощь будет полезна.

Answer 1

Вы можете использовать :first-child и :last-child псевдо-селекторы:

$("table tr th:first-child, table tr th:last-child").css("border-left", "none");

---

Чтобы применить CSS только к последнему TH,Вы можете использовать .last(), вот так (держа в одной строке):

$("table tr th:first-child, table tr th:last-child").css("border-left", "none").last().css("border-right", "none");

Answer 2

$('th:first, th:last').css("border-left", "none");

Это должно сработать.

Вы также можете использовать:

:last-of-type или же :last-child

Вы можете использовать их в своем селекторе jQuery или просто в css, а также использовать sizzlejs для создания кросс-браузер.

Answer 3

Я никогда не пробовал - но есть псевдо-селекторы, называемые first-child и last-child.Возможно, вы сможете настроить таргетинг на них таким образом.

Однако я не уверен в поддержке браузера?