web-dev-qa-db-ja.com

tdタグの最初のレベルのみにスタイルを適用します

クラスのスタイルを1レベルのtdタグのみに適用する方法はありますか？

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>
csscss-selectors
124
RichC

クラスのスタイルを1レベルのtdタグのみに適用する方法はありますか？

はい*：

.MyClass>tbody>tr>td { border: solid 1px red; }

しかし！ IE6では、「>」直接子セレクターは機能しません。そのブラウザをサポートする必要がある場合（おそらくあなたがそうするでしょう）、あなたができることは、内側の要素を個別に選択し、スタイルを設定解除することだけです：

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

*最初の例は、HTMLにないtbody要素を参照していることに注意してください。それはshouldがHTMLに含まれていましたが、ブラウザは一般的にそれを省いても大丈夫です...舞台裏で追加するだけです。

205
bobince

cSS：first-child擬似クラスの使用方法はどうですか：

.MyClass td:first-child { border: solid 1px red; }
36
aviko oloo

このスタイル：

table tr td { border: 1px solid red; }
td table tr td { border: none; }

私に与えます：

このhttp://img12.imageshack.us/img12/4477/borders.png

ただし、ここではおそらくクラスを使用するのが適切な方法です。

8
Nick Presta

MyClass内のテーブルのセレクターを作成するだけです。

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

（すべての内部テーブルに一般的に適用するには、table table tdを実行することもできます。）

6
Chuck

うまくいくと思う。

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
3
uma

テーブルの最初の列の幅を設定したかったのですが、これが機能していることがわかりました（FF7）-最初の列の幅は50ピクセルです：

#MyTable>thead>tr>th:first-child { width:50px;}

私のマークアップは

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>
3
prule

私はあなたが試すことができると思います

table tr td { color: red; }
table tr td table tr td { color: black; }

または

body table tr td { color: red; }

「body」はテーブルの親のセレクターです

しかし、クラスはおそらくここに行く正しい方法です。

2
Simon Buchan