Zastosuj styl tylko do pierwszego poziomu tagów td

136

Czy istnieje sposób na zastosowanie stylu klasy tylko do JEDNEGO poziomu tagów 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
źródło

Odpowiedzi:

221

Czy istnieje sposób na zastosowanie stylu klasy tylko do JEDNEGO poziomu tagów td?

Tak * :

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

Ale! >Selektor bezpośredniego elementu podrzędnego „ ” nie działa w przeglądarce IE6. Jeśli potrzebujesz obsługiwać tę przeglądarkę (co prawdopodobnie robisz, niestety), jedyne, co możesz zrobić, to osobno wybrać element wewnętrzny i cofnąć ustawienie stylu:

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

* Zauważ, że pierwszy przykład odnosi się do tbodyelementu, którego nie ma w kodzie HTML. To powinno być w HTML, ale przeglądarek są ogólnie ok z pozostawiając ją ... po prostu dodać je za kulisami.

bobince
źródło
1
Drżę na myśl o świecie, w którym musieliśmy debugować IE6. Ten post przyniósł dreszcze ...
webfish
35

co powiesz na użycie pseudoklasy CSS: first-child:

.MyClass td:first-child { border: solid 1px red; }
aviko oloo
źródło
16
To nie zadziała. Spowoduje to zaznaczenie wszystkich elementów tdpodrzędnych w drzewie potomnym, .MyClassktóre są pierwszymi z elementów zawierających je, a tym samym nadanie stylu elementowi inner td.
Lazlo
1
jak to ma tyle głosów za? :first-childna pewno nie przyniesie efektu, którego oczekuje OP.
plong0
8

Ten styl:

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

daje mi:

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

Jednak użycie klasy jest tutaj prawdopodobnie właściwym podejściem.

Nick Presta
źródło
Używanie klasy na każdym pojedynczym elemencie td może być trochę zbędne, prawdopodobnie użyłbyś klasy na zawierającym element tabeli, a wtedy nadal musiałbyś wykluczyć drugie poziomy tabel - tj. Twój pierwszy przykład jest poprawny.
thomasrutter
6

Po prostu wybierz selektor tabel w MyClass.

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

(Aby ogólnie zastosować do wszystkich tabel wewnętrznych, możesz również to zrobić table table td).

Głaskanie pod brodę
źródło
3

Chciałem ustawić szerokość pierwszej kolumny tabeli i stwierdziłem, że działa (w FF7) - pierwsza kolumna ma szerokość 50 pikseli:

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

gdzie był mój znacznik

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>
prule
źródło
3

Myślę, że to zadziała.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
uma
źródło
Czy pierwszy z nich wybiera pierwszy tdz każdego wiersza, a drugi tylko pierwszą tdczęść strony?
Joshua Pinter
@JoshuaPinter, w zasadzie masz rację co do pierwszego. Ogólnie td:first-childwybiera dowolny tdelement, który jest pierwszym elementem pod jego rodzicem (bez względu na to, jaki jest jego rodzic). Pierwsza tr td:first-childdodaje warunek, że tdmusi być również zagnieżdżony poniżej a tr(na dowolnym poziomie, niekoniecznie bezpośrednio podrzędnym). tr > td:first-childwybiera element, tdktóry jest pierwszym elementem bezpośrednio pod a tr. Więc ostatecznie :first-childnie ma to nic wspólnego z rozwiązaniem pytania PO i ta odpowiedź jest nieprawidłowa.
plong0
2

Chyba mógłbyś spróbować

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

Lub

body table tr td { color: red; }

gdzie „body” to selektor dla rodzica twojej tabeli

Ale zajęcia są najprawdopodobniej właściwą drogą do tego.

Simon Buchan
źródło