Terapkan gaya hanya ke tingkat pertama dari tag td

136

Adakah cara untuk menerapkan gaya Kelas hanya pada SATU level dari tag 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>
css css-selectors RichC
sumber

Jawaban:

224

Adakah cara untuk menerapkan gaya Kelas hanya pada SATU level dari tag td?

Ya * :

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

Tapi! >Pemilih anak langsung ' ' tidak berfungsi di IE6. Jika Anda perlu mendukung browser itu (yang mungkin Anda lakukan, sayangnya), yang dapat Anda lakukan hanyalah memilih elemen dalam secara terpisah dan menghapus gaya:

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

* Perhatikan bahwa contoh pertama mereferensikan tbodyelemen yang tidak ditemukan di HTML Anda. Ini harus telah di HTML Anda, tapi browser umumnya ok dengan meninggalkan keluar ... mereka hanya menambahkannya di belakang layar.

bobince
sumber
2
Saya ngeri mengingat dunia di mana kami harus men-debug untuk IE6. Posting ini membuat dingin kembali ..
webfish
34

bagaimana kalau menggunakan CSS: first-child pseudo-class:

.MyClass td:first-child { border: solid 1px red; }
aviko oloo
sumber
16
Itu tidak akan berhasil. Ini memilih semua tdanak dalam pohon anak .MyClassyang pertama mengandung elemen, dan dengan demikian juga akan memberi gaya bagian dalam td.
Lazlo
1
bagaimana ini memiliki begitu banyak suara positif? :first-childpasti tidak akan memiliki efek OP yang dicari.
plong0
8

Gaya ini:

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

beri saya:

http://img12.imageshack.us/img12/4477/borders.png ini

Namun, menggunakan kelas mungkin merupakan pendekatan yang tepat di sini.

Nick Presta
sumber
Menggunakan kelas pada setiap elemen td mungkin sedikit berlebihan, Anda mungkin akan menggunakan kelas pada elemen tabel yang berisi, dan kemudian Anda masih harus mengecualikan tabel tingkat kedua - contoh pertama Anda benar.
thomasrutter
6

Buat saja selektor untuk tabel di dalam MyClass.

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

(Untuk secara umum diterapkan ke semua tabel bagian dalam, Anda juga bisa melakukannya table table td.)

Membuang
sumber
3

Saya ingin mengatur lebar kolom pertama tabel, dan saya menemukan ini berfungsi (di FF7) - kolom pertama adalah lebar 50px:

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

dimana markup saya berada

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

Saya pikir, itu akan berhasil.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
uma
sumber
Apakah yang pertama memilih yang pertama tddari setiap baris dan yang kedua hanya memilih yang pertama tddari halaman?
Joshua Pinter
@JoshuaPinter Anda pada dasarnya benar tentang yang pertama. Secara umum, td:first-childmemilih tdelemen apa pun yang merupakan elemen pertama di bawah induknya (tidak peduli apa induknya). Yang pertama tr td:first-childmenambahkan ketentuan bahwa tdharus juga bertumpuk di bawah a tr(di tingkat mana pun, tidak harus turunan langsung). tr > td:first-childmemilih tdyang merupakan elemen pertama langsung di bawah a tr. Jadi pada akhirnya :first-childtidak ada hubungannya dengan solusi atas pertanyaan OP dan jawaban ini salah.
plong0
2

Saya kira Anda bisa mencoba

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

Atau

body table tr td { color: red; }

di mana 'body' adalah pemilih untuk induk tabel Anda

Tetapi kelas kemungkinan besar adalah cara yang tepat untuk pergi ke sini.

Simon Buchan
sumber