Как выбрать первый и последний дочерний элемент этой таблицы?

Question

<div class="showtable-page"> 
    <table class="layout display responsive-table"> 
     <thead> 
      <tr><th>Show</th><th>Address</th><th>Location</th><th>Dates &amp; Hours</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="organisationnumber">ABC</td> 
       <td> 
        <ul style="list-style-type: none;"> 
         <li>KLM</li> 
         <li>OPQ</li> 
        </ul> 
       </td> 
       <td>US</td> 
       <td>Mon-Fri 9AM - 6PM</td> 
      </tr> 

Для CSS, как мне добраться до таблицы tr td: first-child, table tr th: first-child для этой таблицы? В таблице стилей содержатся базовые стили для таблиц в целом, мне нужно изменить прописку на этой конкретной таблице.

Благодаря

Answer 1

Дают ID к этой таблице говорят mytable.

Атрибут id указывает уникальный идентификатор для элемента HTML.

Try:

HTML:

<table id="mytable" class="layout display responsive-table"> 

CSS:

#mytable th:first-child{ 
    /* your styles*/ 
} 
#mytable td:first-child{ 
    /* your styles*/ 
} 

DEMO here.

Answer 2

Вы уже дали ответ.

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

table tr td:first-child, table tr th:first-child{ 

} 

Можете ли вы уточнить, в чем проблема?

Answer 3

Используйте селекторы классов или, если необходимо, добавьте идентификатор в таблицу и используйте это (хотя я стараюсь избегать использования селекторов идентификаторов в CSS).

CSS-бы выглядеть следующим образом:

.layout.display.responsive-table th:first-child 
{ 
    /* your css here */ 
} 

.layout.display.responsive-table td:first-child 
{ 
    /* your css here */ 
} 

Если это не работает, посмотрите на this article, чтобы выяснить, как переопределить другие селекторы с вашими. Похоже, вы используете Bootstrap (из класса с учетом таблицы), поэтому вам может потребоваться добавить несколько элементов, чтобы заставить это работать.

Answer 4

Для выбора последнего ребенка вам нужно, например:

tr td:last-child 

Имейте в виду :last-child Является CSS3. Таким образом, он не будет поддерживаться в старых браузерах (< IE 9)