Выбор CSS первого столбца первой строки таблицы (исключая вложенные таблицы)

У меня возникают трудности с селекторами CSS, и я надеюсь, что кто-то может помочь мне здесь.

У меня есть HTML, который выглядит так:

<table class=myTable>
   <tr>
      <td>this is the td of interest</td>
   </tr>
   <tr>
      <td>
         <table>
            <tr><td>I don't want this td!</td></tr>
         </table>
      </td>
   </tr>
</table>

Я пытаюсь применить фоновое изображение к FIRST td FIRST tr. Поэтому я попробовал следующее:

table.myTable tr:first-child td:first-child {
    background-image: url(someUrl.gif);
}

Но это также находит первый td первого tr вложенной таблицы. Я пробовал разные комбинации s > и +, но не повезло. У кого-нибудь есть идеи?

Примечание. Я нацелен на решение, совместимое с IE7 +.

Ответ 1

Селектор, который вам нужен,

table.myTable > tbody > tr:first-child > td:first-child

В нем есть неявный элемент TBODY, хотя у вас его нет в коде.

Ответ 2

table.myTable > tr:first-child > td:first-child

The > означает tr, являющийся прямым дочерним элементом таблицы

Ответ 3

Не то, чтобы скорость действительно была проблемой для среднего веб-сайта в этот день и в возрасте, но стоит отметить.

Теги

медленнее найти, чем классы, а классы медленнее найти, чем id.

Итак, для простоты и скорости, как просто назначить идентификатор для рассматриваемого элемента и применить стиль к id?

Ответ 4

Эта работа для меня:

table.myClass > tbody:first-of-type > tr > td:first-child

Ответ 5

table.myTable  > tbody tr > td:first-child

Для первого столбца.

Ответ 6

table.myTable > tr: first-child > td: first-child

Этот код трудно поддерживать. Вместо этого попробуйте следующее:

<table class="myTable">
   <tr>
      <td class="verySpecialCell">this is the td of interest</td>
   </tr>
   <tr>
      <td>
         <table>
            <tr><td>I don't want this td!</td></tr>
         </table>
      </td>
   </tr>
</table>

или даже

<table class=myTable>
   <tr>
      <td>
         <div class="verySpecialContent">
            this is the td of interest
         </div>
      </td>
   </tr>
   <tr>
      <td>
         <table>
            <tr><td>I don't want this td!</td></tr>
         </table>
      </td>
   </tr>
</table>

Ответ 7

font-weight: bold;}

Ответ 8

Следующий код может помочь вам,

Код HTML:

<table id="myTableId" class="myTableClass">
    <tr>
        <th>S.No</th>
        <th>Name</th>
    </tr>
</table>

Код CSS:

Использование идентификатора таблицы:

table[id="myTableId"] > tr:first-child > th:first-child{
}

Использование класса table:

table[class="myTableClass"] > tr:first-child > th:first-child{
}

или

table.myTableClass > tr:first-child > th:first-child{
}

или

table.myTableClass tr:first-child > th:first-child{
}