html - 行の最初のTD要素を選択する方法

Question

いくつかの行があるテーブルがあります。クラスを持つテーブルに対してのみTD、行の最初の要素の色を再帰的に変更できるCSSを作成したいと思います。TRmytable

CSSのサンプルを教えてください。

<table class="mytable">
    <tr>
        <td>Event Title:</td><!--Change color here-->
        <td>{EventTitle}</td>
    </tr>
    <tr>
        <td>Start date:</td><!--Change color here-->
        <td>{DateTimeStart}</td>
    </tr>
    <tr>
        <td>End date:</td><!--Change color here-->
        <td>{DateTimeEnd}</td>
    </tr>
</table>

Answer 1

これには、 ：first-childプロパティを使用できます。このように書いてください：

.mytable td:first-child{
 color:red;
}

Answer 2

CSSの「first-child」要素を使用します：http ：//www.w3schools.com/cssref/sel_firstchild.asp

したがって、次のようなことができます。

.mytable td:first-child {
   something here
}

Answer 3

@sandeepが書いているように、最初の子を使用して目標を達成できます。可能であれば、最初のtdにクラス名を追加することをお勧めします。これがヘッダーであると想定される場合は、tdの代わりにthを使用することもできます。

Answer 4

Sandeepは正しい考えを持っていますが、あなたはもう少し具体的なスタイルルールを求めているようです。これを試して：

table.mytable td:first-child {}

Answer 5

:first-childIEでは機能しません。実際的なアプローチはtd、背景を適用するこれらを変更しthてからスタイルを設定することです。

Answer 6

あなたはこれを試すことができます：

HTML

<table class="mytable">
                <tr>
                        <td>Event Title:</td><!--Change color here-->
                        <td>{EventTitle}</td>
                </tr>
                <tr>
                        <td>Start date:</td><!--Change color here-->
                        <td>{DateTimeStart}</td>
                </tr>
                <tr>
                        <td>End date:</td><!--Change color here-->
                        <td>{DateTimeEnd}</td>
                </tr>
        </table>

CSS

.mytable tr td:first-child{
 color:red;
}

http://jsfiddle.net/hrBAn/1/