Applica lo stile solo al primo livello di tag td

136

C'è un modo per applicare lo stile di una classe a UN SOLO livello di 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
fonte

221

C'è un modo per applicare lo stile di una classe a UN SOLO livello di tag td?

Sì ^* :

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

Ma! Il >selettore "figlio diretto" non funziona in IE6. Se devi supportare quel browser (cosa che probabilmente fai, ahimè), tutto ciò che puoi fare è selezionare l'elemento interno separatamente e deselezionare lo stile:

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

^* Nota che il primo esempio fa riferimento a un tbodyelemento non trovato nel tuo HTML. Si dovrebbe essere in HTML, ma i browser sono generalmente ok con lasciandolo fuori ... che basta aggiungere in dietro le quinte.

— bobince
fonte

1

rabbrividisco nel ricordare un mondo in cui abbiamo dovuto eseguire il debug per IE6. Questo post ha riportato i brividi ...

— webfish

35

che ne dici di usare il CSS: pseudo-classe del primo figlio:

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

— aviko oloo
fonte

16

Non funzionerà Questo seleziona tutti i tdbambini nell'albero dei bambini di .MyClasscui sono i primi dei loro elementi di contenimento, e quindi modellerà anche l'interno td.

— Lazlo,

1

come può avere così tanti voti positivi? :first-childsicuramente non avrà l'effetto che OP sta cercando.

— pl0,

8

Questo stile:

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

mi da:

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

Tuttavia, l'utilizzo di una classe è probabilmente l'approccio giusto qui.

— Nick Presta
fonte

L'uso di una classe su ogni singolo elemento td può essere un po 'ridondante, probabilmente useresti una classe sull'elemento della tabella contenente, e quindi dovresti comunque escludere i secondi livelli di tabelle - cioè il tuo primo esempio è corretto.

— thomasrutter,

6

Basta creare un selettore per le tabelle all'interno di una MyClass.

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

(Per applicare genericamente a tutte le tabelle interne, puoi anche farlo table table td.)

— Mandrino
fonte

3

Volevo impostare la larghezza della prima colonna della tabella e ho trovato che funzionava (in FF7) - la prima colonna è larga 50 px:

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

dov'era il mio markup

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

— pRule
fonte

3

Penso che funzionerà.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

— uma
fonte

La prima seleziona la prima tddi ogni riga e la seconda seleziona solo la prima tddella pagina?

— Joshua Pinter,

@JoshuaPinter hai fondamentalmente ragione sul primo. In generale, td:first-childseleziona qualsiasi tdelemento che è il primo elemento sotto il suo genitore (non importa quale sia il suo genitore). Il primo tr td:first-childaggiunge la condizione che sia tdnecessario annidare anche sotto a tr(a qualsiasi livello, non necessariamente diretto discendente). tr > td:first-childseleziona a tdche è il primo elemento direttamente sotto a tr. Quindi alla fine :first-childnon ha nulla a che fare con una soluzione alla domanda del PO e questa risposta non è corretta.

— pl0,

2

Immagino che potresti provarci

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

O

body table tr td { color: red; }

dove 'body' è un selettore per il genitore del tuo tavolo

Ma le lezioni sono probabilmente il modo giusto per andare qui.

— Simon Buchan
fonte