Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
sélecteur css qui permet de désigner la première colonne de la première
table ?

j'ai essayé ceci
div.form-zone:first-child table tr td:child-child { vertical-align:top }
ou
div.form-zone table:first-child tr td:first-child { vertical-align: top;}

Le second ne donne rien, et le premier reproduit également l'alignement
sur la table imbriquée.


Merci

Zouplaz a écrit :
> Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
> sélecteur css qui permet de désigner la première colonne de la première
> table ?

bon ...
1) les tables c'est mal
2) les tables imbriquées c'est encore + beurk :-(

Ceci dit,
http://www.yoyodesign.org/doc/w3c/cs...ector.html#x25

et donc pour la table imbriquée :

#grandeTable #petiteTable tr td:first-child { color: red }

ou :

table table tr td:first-child { color: red }

ou :

div#monDiv table table tr td:first-child { color: red }

ou (pour ttes tables du div "monDiv") :

div#monDiv tr td:first-child { color: red }

ou (pour la table principale, objet du post me semble-ce) :

div#monDiv table:first-child tr td:first-child { color: red }


Donc ton code devrait faire.
Mais ça ne doit pas fonctionner avec IE <=6


> div.form-zone table:first-child tr td:first-child { vertical-align: top;}

Pas certain que vertical-align soit approprié pour les TDs ... ?
<http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align>
me disent :
"à l'intérieur ... des boîtes générées par un élément de type en-ligne"

(testé, ça fonctionne dans Firefox et même dans Safari 2)

Le 29/10/2007 15:53, Zouplaz a écrit :
> Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
> sélecteur css qui permet de désigner la première colonne de la première
> table ?
>
> j'ai essayé ceci
> div.form-zone:first-child table tr td:child-child { vertical-align:top }
^^^^^

Tu as ça dans ton code, ou bien c'est une coquille dans ce seul
article ?

> ou
> div.form-zone table:first-child tr td:first-child { vertical-align: top;}
>
> Le second ne donne rien, et le premier reproduit également l'alignement
> sur la table imbriquée.

Je propose :

div.form-zone > table:first-child > tbody > tr > td:first-child {
vertical-align: top;
}

Ou alors peut-être :

div.form-zone table:first-child tr td:first-child {
vertical-align: top;
}
div.form-zone table:first-child table tr td:first-child {
vertical-align: baseline;
}
div.form-zone table table:first-child tr td:first-child {
vertical-align: baseline;
}

(Non testés)

Bonjour.

"SAM" <stephanemoriaux.NoAdmin> a écrit dans le message
de news:cef3
> Zouplaz a écrit :
> > Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
> > sélecteur css qui permet de désigner la première colonne de la première
> > table ?
> [...]
> div#monDiv table:first-child tr td:first-child { color: red }
>
> Donc ton code devrait faire.
> Mais ça ne doit pas fonctionner avec IE <=6
>

Mais si, il suffit de terminer le développement du navigateur soi-même :o)

http://www.gatellier.be/blog/css-pse...rnet-explorer/

Encore un HTC à fabriquer... Que c'est nuuuuuuuuuuul !

Patrick 'Zener' Brunet a écrit :
> Bonjour.
>
> "SAM" <stephanemoriaux.NoAdmin> a écrit dans le message
> de news:cef3
>> [...]
>> div#monDiv table:first-child tr td:first-child { color: red }
>>
>> Donc ton code devrait faire.
>> Mais ça ne doit pas fonctionner avec IE <=6
>
> Mais si, il suffit de terminer le développement du navigateur soi-même :o)
>
> Encore un HTC à fabriquer... Que c'est nuuuuuuuuuuul !

Normalement il y avait une bibli appelée IE7 qui était censée faire tout
ça ...
http://dean.edwards.name/IE7/

le 29/10/2007 16:56, Olivier Miakinen nous a dit:
> Le 29/10/2007 15:53, Zouplaz a écrit :
>> Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
>> sélecteur css qui permet de désigner la première colonne de la première
>> table ?
>>
>> j'ai essayé ceci
>> div.form-zone:first-child table tr td:child-child { vertical-align:top }
> ^^^^^
>
> Tu as ça dans ton code, ou bien c'est une coquille dans ce seul
> article ?

Non c'était une coquille ici uniquement

>
>> ou
>> div.form-zone table:first-child tr td:first-child { vertical-align: top;}
>>
>> Le second ne donne rien, et le premier reproduit également l'alignement
>> sur la table imbriquée.
>
> Je propose :
>
> div.form-zone > table:first-child > tbody > tr > td:first-child {
> vertical-align: top;
> }
>

Marche pas... Non plus sans le >
Ca ne produit aucun alignement

> Ou alors peut-être :
>
> div.form-zone table:first-child tr td:first-child {
> vertical-align: top;
> }

Non plus

> div.form-zone table:first-child table tr td:first-child {
> vertical-align: baseline;
> }
> div.form-zone table table:first-child tr td:first-child {
> vertical-align: baseline;
> }
>

Ceux là je tente pas, car c'est pas seulement le vertical-align que je
cherche à laisser intact mais toutes les propriétés des tables imbriquées.

le 29/10/2007 16:45, SAM nous a dit:

> Ceci dit,
> [..]
>

Déjà lu !! Hé je RTFM quand même !

[..]
>
> ou (pour ttes tables du div "monDiv") :
>
> div#monDiv tr td:first-child { color: red }
>
> ou (pour la table principale, objet du post me semble-ce) :
>
> div#monDiv table:first-child tr td:first-child { color: red }
>
Oui mais là tu affectes la table imbriquée, moi ce que je veux c'est
l'ignorer : altérer les attributs de la table extérieure sans que ça
n'impacte ce qui est dedans.

Pour être plus précis, l'intérieur de ma table contient un éditeur
online (tiny mce) et je veux éviter de semer la pagaille dans ses
propres feuilles de styles ainsi qu'altérer le format du texte édité.

Après, savoir si je devrais me passer des tables - je cherche même pas.
On va pas troller mais j'ai déjà tenté plusieurs fois les formulaires
sans tables et j'ai encore mal où je pense ;-) Alors dans la mesure où
il y a plus important et qu'en plus c'est pour de l'intranet : je zappe

Le 30/10/2007 12:31, Zouplaz a écrit :
>> Je propose :
>>
>> div.form-zone > table:first-child > tbody > tr > td:first-child {
>> vertical-align: top;
>> }
>
> Marche pas... Non plus sans le >
> Ca ne produit aucun alignement

Et si tu nous donnais ton code html ? S'il y a des éléments
intermédiaires entre le div et la table, par exemple, c'est normal
que ça ne marche pas avec le >.

En revanche, sans aucun > cela devrait marcher (ou alors il faut
supprimer tbody, mais ça m'étonne).

>> Ou alors peut-être :
>>
>> div.form-zone table:first-child tr td:first-child {
>> vertical-align: top;
>> }
>
> Non plus

Ah ? Parce que la « première table » n'est pas la première dans le div ?
Voir (¹).

>> div.form-zone table:first-child table tr td:first-child {
>> vertical-align: baseline;
>> }
>> div.form-zone table table:first-child tr td:first-child {
>> vertical-align: baseline;
>> }
>
> Ceux là je tente pas, car c'est pas seulement le vertical-align que je
> cherche à laisser intact mais toutes les propriétés des tables imbriquées.

Eh, c'était un seul exemple, pas trois ! Les deux règles suivantes
étaient censées compenser dans la table imbriquée la règle pour la
première table.



(¹) Que donne ceci ?
div.form-zone > table > tbody > tr > td:first-child {
vertical-align: top;
}

Zouplaz a écrit :
> le 29/10/2007 16:45, SAM nous a dit:
>>
>> ou (pour la table principale, objet du post me semble-ce) :
>>
>> div#monDiv table:first-child tr td:first-child { color: red }
>
> Oui mais là tu affectes la table imbriquée,

Non, justement pas, j'affecte la première table du div monDiv
Celle imbriquée, donc à minima 2ième, ne devrait pas réagir.

Bon ... j'aurions mal vu sur mes tests ?
Alors faut restyler les tables imbriquées :


div#monDiv table tr td:first-child {
color: red;
vertical-align: top
}
div#monDiv table table td,
div#monDiv table table tr td:first-child {
color: black;
vertical-align: middle;
height: auto
}


Voir démo (lien en bas)

> Pour être plus précis, l'intérieur de ma table contient un éditeur
> online (tiny mce) et je veux éviter de semer la pagaille dans ses
> propres feuilles de styles ainsi qu'altérer le format du texte édité.

bon eh ben tu n'as qu'à mettre en forme avec ot' chose que des tables

ou

styler précisément ces imbrications

> Après, savoir si je devrais me passer des tables - je cherche même pas.
> On va pas troller mais j'ai déjà tenté plusieurs fois les formulaires
> sans tables et j'ai encore mal où je pense ;-) Alors dans la mesure où
> il y a plus important et qu'en plus c'est pour de l'intranet : je zappe

Pourtant si tu code en html "propre" styler ne devient plus un si grand
casse-tête, même pour des formulaires.

Tu as à ta disposition tout un arsenal html : fieldset, legend, label
http://cjoint.com/?kEp5SrNq3w

Le 30/10/2007 15:59, SAM a écrit :
>>>
>>> div#monDiv table:first-child tr td:first-child { color: red }
>>
>> Oui mais là tu affectes la table imbriquée,
>
> Non, justement pas, j'affecte la première table du div monDiv

Plus exactement : la table du div monDiv, si et seulement si c'est le
premier élément de ce div.

> Celle imbriquée, donc à minima 2ième, ne devrait pas réagir.

Si la table imbriquée est le premier élément d'un TD de la première
table, elle réagira.

Un petit exemple, car j'ai l'impression que vous vous fourvoyez tous les
deux sur ce que veut dire « first-child » :

<div id="monDiv">
<p>...</p>
<table id="t1">
<tr>
<td>
<table id="t2">...</table>
<table id="t3">...</table>
</td>
<td>
<table id="t4">...</table>
<table id="t5">...</table>
</td>
</tr>
</table>
<table id="t6">
<tr>
<td>
<table id="t7">...</table>
<table id="t8">...</table>
</td>
<td>
<table id="t9">...</table>
<table id="t10">...</table>
</td>
</tr>
</table>
</div>

div#monDiv table:first-child {
/*
Ceci impactera t2, t4, t7 et t9
mais pas t1, t3, t5, t6, t8 ni t10
*/
}

Olivier Miakinen a écrit :
>
> Un petit exemple, car j'ai l'impression que vous vous fourvoyez tous les
> deux sur ce que veut dire « first-child » :
(...)
> div#monDiv table:first-child {
> /*
> Ceci impactera t2, t4, t7 et t9
> mais pas t1, t3, t5, t6, t8 ni t10
> */
> }

Non ça marche pô !
Testé ... ça s'applique bien à la première table du div (comme de juste)
Et même pire ... les sous-tables héritent du style !

Pour attaquer la 1ère table d'1 TD de la table principale c'est :
div#monDiv table table:first-child { color: red; }
ou :
div#monDiv td table:first-child { color: red; }

De plus ... ce n'est pas le propos ... !
(du moins si j'ai bien compris).


Le propos est de styler la 1ère colonne de la table *principale*
soit le 1er TD de chaque TR

#mondiv table tr td:firstchild { color: red }
ou
#mondiv tr td:firstchild { color: red }

Le propos (en annexe) est que les tables imbriquées dans celle
principale ne soient pas stylées.
A défaut de styler sur une class donnée à la table principale, pour ne
pas aussi styler les tables imbriquées(*), je ne vois que la soluce de
styler le contraire pour ces dernières.

#mondiv table table tr td:firstchild { color: black }
ou ?
#mondiv table table td { color: black }
ou ... et ?
#mondiv table tr td:firstchild table td { color: black }

Pour "dé"styler il faut le prévoir en 1ière colonne ET en colonne
normale de chaque sous table

div#monDiv table table td,
div#monDiv table table tr td:first-child { color: black }

Revoir l'exemple qui fonctionne chez moi
http://cjoint.com/?kEp5SrNq3w


(*) le coup de la class sur table principale
ne donne pas mieux que le reste :-(

Bonsoir.

"SAM" <stephanemoriaux.NoAdmin> a écrit dans le message
de news:cef3
> Olivier Miakinen a écrit :
> (...)
>
> Non ça marche pô !
> Testé ... ça s'applique bien à la première table du div (comme de juste)
> Et même pire ... les sous-tables héritent du style !
>

Il m'est déjà arrivé, quand je voulais encore faire ce genre d'accès en
Javascript, de parcourir les childNodes et de constater des différences de
structure entre les divers navigateurs (il y a des nodes fantômes ?).

Quand j'ai un truc qui me gonfle de la sorte, je préfère donner une classe
(ou un id si unique) à l'élément final que je vise, et finalement c'est plus
simple et plus fiable à la fois...

Patrick 'Zener' Brunet a écrit :
>
> Il m'est déjà arrivé, quand je voulais encore faire ce genre d'accès en
> Javascript, de parcourir les childNodes et de constater des différences de
> structure entre les divers navigateurs (il y a des nodes fantômes ?).

Il suffit d'ouvrir le DOM-Inspector de Firefox pour les voir.

En général on fait une boucle jusqu'à temps de trouver le node du bon type

var truc = machin.firstChild;
while(truc.tagName != 'p') truc = truc.firstChild;
alert(truc.innerHTML);

en espérant qu'il y ait bien un tag P qque part dans les enfants ...

var truc = machin.firstChild;
while(truc.tagName != 'p' && truc.firstChild) truc = truc.firstChild;
if(truc.tagName == 'p') alert(truc.innerHTML);
else alert('erreur');

> Quand j'ai un truc qui me gonfle de la sorte, je préfère donner une classe
> (ou un id si unique) à l'élément final que je vise, et finalement c'est plus
> simple et plus fiable à la fois...

tout dépend ... :-)

Le 30/10/2007 18:53, Patrick 'Zener' Brunet répondait à SAM :
>> >
>> > div#monDiv table:first-child {
>> > /*
>> > Ceci impactera t2, t4, t7 et t9
>> > mais pas t1, t3, t5, t6, t8 ni t10
>> > */
>> > }
>>
>> Non ça marche pô !
>> Testé ... ça s'applique bien à la première table du div (comme de juste)

Ben zut alors ! Tous les navigateurs sont bugués alors ? Je n'ai pas
encore fait le test moi-même, il faudra que je le fasse, mais la page
<http://www.yoyodesign.org/doc/w3c/css2/selector.html#first-child> est
assez claire :

<cit.>
dans cet extrait-ci, il ne toucherait pas le second élément P :

<P> Le dernier P avant la note.
<DIV class="note">
<H2>Note</H2>
<P> Le premier P à l'intérieur de la note.
</DIV>
</cit.>

>> Et même pire ... les sous-tables héritent du style !

Si tu as choisis des styles qui sont hérités par défaut, c'est peut-être
normal.

> Quand j'ai un truc qui me gonfle de la sorte, je préfère donner une classe
> (ou un id si unique) à l'élément final que je vise, et finalement c'est plus
> simple et plus fiable à la fois...

Oui, absolument.

Olivier Miakinen a écrit :
> Le 30/10/2007 18:53, Patrick 'Zener' Brunet répondait à SAM :
>>>> div#monDiv table:first-child {
>>>> /*
>>>> Ceci impactera t2, t4, t7 et t9
>>>> mais pas t1, t3, t5, t6, t8 ni t10
>>>> */
>>>> }
>>> Non ça marche pô !
>>> Testé ... ça s'applique bien à la première table du div (comme de juste)
>
> Ben zut alors ! Tous les navigateurs sont bugués alors ?

ben non ... la première table du div 'monDiv'
est bien la table principale
(et non pas les premières tables de cette table principale)

> mais la page
> <http://www.yoyodesign.org/doc/w3c/css2/selector.html#first-child> est
> assez claire :

toutafé : le premier P des divs de classe 'note'
la première table du div 'monDiv'

> <cit.>
> dans cet extrait-ci, il ne toucherait pas le second élément P :
>
> <P> Le dernier P avant la note.
> <DIV class="note">
> <H2>Note</H2>
> <P> Le premier P à l'intérieur de la note.
> </DIV>
> </cit.>

vi sans doute, mais qu'en serait-il de :

<div class="note">
<h2>Note</h2>
<p><span>le premier span à l'intérieur de la note</span></p>
</div>

div.note span:first-child { color: red }
qui est à peu près ce que tu dis :
div#monDiv table:first-child { color: red }
nous met en rouge ce 1er span du div
(pourtant dans le 2ième élément du dit div)

C'est siouxement calculé ce truc de premier enfant !
(qui y englobe les petits-enfants comme étant des enfants)
(mais bon, ça va bien avec la notion du cascading me semble-ce)

>>> Et même pire ... les sous-tables héritent du style !
>
> Si tu as choisis des styles qui sont hérités par défaut, c'est peut-être
> normal.

ce qui est normal est qu'à défaut de style particulier ça hérite :-)

>> Quand j'ai un truc qui me gonfle de la sorte, je préfère donner une classe
>> (ou un id si unique) à l'élément final que je vise, et finalement c'est plus
>> simple et plus fiable à la fois...
>
> Oui, absolument.

faut donc donner une class aux sous-tables, et cette class doit contrer
tous les styles donnés à la table principale (du moins ceux qui ne sont
pas désirés).