Appliquer le style uniquement au premier niveau des balises td

136

Existe-t-il un moyen d'appliquer un style de classe à un seul niveau de balises 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
la source

Réponses:

221

Existe-t-il un moyen d'appliquer un style de classe à un seul niveau de balises td?

Oui * :

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

Mais! Le >sélecteur «direct-child» ne fonctionne pas dans IE6. Si vous avez besoin de prendre en charge ce navigateur (ce que vous faites probablement, hélas), tout ce que vous pouvez faire est de sélectionner l'élément interne séparément et de dé-définir le style:

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

* Notez que le premier exemple fait référence à un tbodyélément introuvable dans votre HTML. Cela aurait dû être dans votre HTML, mais les navigateurs acceptent généralement de le laisser de côté ... ils l'ajoutent simplement dans les coulisses.

bobince
la source
1
Je frémis de me souvenir d'un monde où nous avons dû déboguer pour IE6. Ce message a ramené des frissons ..
webfish
35

que diriez-vous d'utiliser la pseudo-classe CSS: first-child:

.MyClass td:first-child { border: solid 1px red; }
aviko oloo
la source
16
Cela ne fonctionnera pas. Cela sélectionne tous les tdenfants dans l'arborescence des enfants .MyClassdont sont les premiers de leur élément contenant, et ainsi styliseront également l'intérieur td.
Lazlo
1
comment cela a-t-il autant de votes positifs? :first-childn'aura certainement pas l'effet recherché par OP.
plong0
8

Ce style:

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

Donne moi:

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

Cependant, utiliser une classe est probablement la bonne approche ici.

Nick Presta
la source
Utiliser une classe sur chaque élément td peut être un peu redondant, vous utiliseriez probablement une classe sur l'élément table contenant, puis vous devrez toujours exclure les seconds niveaux de tables - c'est-à-dire que votre premier exemple est correct.
thomasrutter
6

Créez simplement un sélecteur pour les tables à l'intérieur d'une MyClass.

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

(Pour appliquer de manière générique à toutes les tables internes, vous pouvez également le faire table table td.)

Mandrin
la source
3

Je voulais définir la largeur de la première colonne du tableau, et j'ai trouvé que cela fonctionnait (dans FF7) - la première colonne a une largeur de 50px:

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

où était mon balisage

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

Je pense que cela va fonctionner.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
uma
la source
Le premier sélectionne-t-il la première tdde chaque ligne et le second ne sélectionne que le premier tdde la page?
Joshua Pinter
@JoshuaPinter vous avez fondamentalement raison sur le premier. En général, td:first-childsélectionne tout tdélément qui est le premier élément sous son parent (quel que soit son parent). Le premier tr td:first-childajoute la condition que le tddoit également être imbriqué sous a tr(à n'importe quel niveau, pas nécessairement descendant direct). tr > td:first-childsélectionne a tdqui est le premier élément directement sous a tr. Cela :first-childn'a donc finalement rien à voir avec une solution à la question du PO et cette réponse est incorrecte.
plong0
2

Je suppose que tu pourrais essayer

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

Ou

body table tr td { color: red; }

où 'body' est un sélecteur pour le parent de votre table

Mais les cours sont probablement la bonne voie à suivre ici.

Simon Buchan
la source