Aplicar estilo solo al primer nivel de etiquetas td

136

¿Hay alguna manera de aplicar el estilo de una clase a solo UN nivel de etiquetas 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
fuente

Respuestas:

221

¿Hay alguna manera de aplicar el estilo de una clase a solo UN nivel de etiquetas td?

Sí * :

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

¡Pero! El ' >' selector directo-secundario no funciona en IE6. Si necesita admitir ese navegador (lo que probablemente haga, por desgracia), todo lo que puede hacer es seleccionar el elemento interno por separado y desactivar el estilo:

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

* Tenga en cuenta que el primer ejemplo hace referencia a un tbodyelemento que no se encuentra en su HTML. Se debería haber estado en el código HTML, pero los navegadores son generalmente bien con dejar que fuera ... que acaba de añadir en bastidores.

bobince
fuente
1
Me estremezco al recordar un mundo donde tuvimos que depurar IE6. Esta publicación trajo escalofríos ..
webfish
35

¿Qué tal el uso de la pseudo-clase CSS: primer hijo:

.MyClass td:first-child { border: solid 1px red; }
aviko oloo
fuente
16
Eso no funcionará. Esto selecciona todos tdlos elementos secundarios del árbol de elementos .MyClasscuyo primer elemento contiene y, por lo tanto, también estilizará el elemento interno td.
Lazlo
1
¿Cómo tiene esto tantos votos a favor? :first-childdefinitivamente no tendrá el efecto que OP está buscando.
plong0
8

Este estilo:

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

me da

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

Sin embargo, usar una clase es probablemente el enfoque correcto aquí.

Nick Presta
fuente
El uso de una clase en cada elemento td puede ser un poco redundante, probablemente usaría una clase en el elemento de la tabla que lo contiene, y luego aún tendría que excluir segundos niveles de tablas, es decir, su primer ejemplo es correcto.
thomasrutter 05 de
6

Simplemente haga un selector para las tablas dentro de MyClass.

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

(Para aplicar genéricamente a todas las tablas internas, también podría hacerlo table table td).

Arrojar
fuente
3

Quería establecer el ancho de la primera columna de la tabla, y encontré que esto funcionaba (en FF7): la primera columna tiene 50 píxeles de ancho:

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

donde estaba mi marcado

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

Creo que funcionará.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
uma
fuente
¿El primero selecciona el primero tdde cada fila y el segundo solo selecciona el primero tdde la página?
Joshua Pinter
@JoshuaPinter, básicamente tienes razón sobre el primero. En general, td:first-childselecciona cualquier tdelemento que sea el primer elemento debajo de su elemento primario (sin importar cuál sea su elemento primario). El primero tr td:first-childagrega la condición de que tdtambién debe estar anidado debajo de a tr(en cualquier nivel, no necesariamente descendiente directo). tr > td:first-childselecciona un tdque es el primer elemento directamente debajo de a tr. Entonces, en última instancia, :first-childno tiene nada que ver con una solución a la pregunta del OP y esta respuesta es incorrecta.
plong0
2

Supongo que podrías intentarlo

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

O

body table tr td { color: red; }

donde 'body' es un selector para el padre de tu tabla

Pero es muy probable que las clases sean la forma correcta de ir aquí.

Simon Buchan
fuente