表の最初の行の最初の列の CSS 選択 (ネストされた表を除く) 質問する

表の最初の行の最初の列の 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>

最初の tr の最初の td に背景画像を適用しようとしています。そこで、次のことを試しました。

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

しかし、これはネストされたテーブルの最初の tr の最初の td を見つけることでもあります。 > と + のさまざまな組み合わせを試しましたが、うまくいきませんでした。 誰かアイデアはありますか?

注: IE7+ と互換性のあるソリューションを目指しています。

ベストアンサー1

必要なセレクタは

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

コード内には TBODY 要素がなくても、暗黙的に存在します。

おすすめ記事