css selector pour sélectionner la première de deux tables imbriquées ?

Bonsoir.

"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 47276c03$0$25914$ba4acef3@news.orange.fr...

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 !

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...

--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/

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 ... :-)

--
sm

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).

--
sm

Le 30/10/2007 18:38, SAM avait écrit :

Non ça marche pô !
Testé ... [...]

Avec quoi as-tu testé ? Chez moi, ça marche finement aussi bien dans
SeaMonkey 1.1.5 que dans Firefox 2.0.0.8 (sur Windows 2000). Ça ne
marche pas bien sûr dans IE6, puisqu'il ne reconnaît pas first-child.

Le 30/10/2007 22:32, Olivier Miakinen a écrit :

Le 30/10/2007 18:38, SAM avait écrit :

Non ça marche pô !
Testé ... [...]

Avec quoi as-tu testé ? Chez moi, ça marche finement aussi bien dans
SeaMonkey 1.1.5 que dans Firefox 2.0.0.8 (sur Windows 2000). Ça ne
marche pas bien sûr dans IE6, puisqu'il ne reconnaît pas first-child.

Voir http://www.miakinen.net/tmp/first-child/

HTML :

<p>Paragraphe</p>

<div id="monDiv">
<table id="t1">
<tr>
<td>
<p>Paragraphe</p>
<table id="t2"><tr><td>TABLE 2</td></tr></table>
<table id="t3"><tr><td>TABLE 3</td></tr></table>
</td>

<td>
<table id="t4"><tr><td>TABLE 4</td></tr></table>
<table id="t5"><tr><td>TABLE 5</td></tr></table>
</td>
</tr>
</table>
<table id="t6">
<tr>
<td>
<table id="t7"><tr><td>TABLE 7</td></tr></table>
<table id="t8"><tr><td>TABLE 8</td></tr></table>
</td>
<td>
<table id="t9"><tr><td>TABLE 9</td></tr></table>
<table id="t10"><tr><td>TABLE 10</td></tr></table>

</td>
</tr>
</table>
</div>

CSS :

* {
border: 0 none;
}
table {
border: 1px solid black;
}
div#monDiv table:first-child {
/*
Ceci impactera t1, t4, t7 et t9
mais pas t2, t3, t5, t6, t8 ni t10
*/
border: 2px solid red;
}

Olivier Miakinen a écrit :

Le 30/10/2007 18:38, SAM avait écrit :

Non ça marche pô !
Testé ... [...]

Avec quoi as-tu testé ? Chez moi, ça marche finement aussi bien dans
SeaMonkey 1.1.5 que dans Firefox 2.0.0.8 (sur Windows 2000). Ça ne
marche pas bien sûr dans IE6, puisqu'il ne reconnaît pas first-child.

Je me demande si on n'est pas d'accord finalement.

Il y a juste que j'exclus les tables principales du div conteneur pour
n'attaquer *que* les tables *imbriquées*, voir :
http://cjoint.com/?kFaDATDr1j

--
sm

Olivier Miakinen a écrit :

Le 30/10/2007 22:32, Olivier Miakinen a écrit :

Le 30/10/2007 18:38, SAM avait écrit :

Non ça marche pô !
Testé ... [...]

Avec quoi as-tu testé ?

on n'est juste pas d'accord sur quoi tester + le pb t1/t2 (cf + bas).

Chez moi, ça marche finement aussi bien dans
SeaMonkey 1.1.5 que dans Firefox 2.0.0.8 (sur Windows 2000). Ça ne
marche pas bien sûr dans IE6, puisqu'il ne reconnaît pas first-child.

Voir http://www.miakinen.net/tmp/first-child/

(...)

/*
Ceci impactera t1, t4, t7 et t9
mais pas t2, t3, t5, t6, t8 ni t10
*/

Oui je vois bien ça.

Ha Ha ! ce n'est donc plus :
/*
Ceci impactera t2, t4, t7 et t9
mais pas t1, t3, t5, t6, t8 ni t10
*/
:-)
Il me semble que l'échange t2<->t1 fait une groosse différence dans
l'interprétation du phénomène.

M'enfin je reste dans mon idée : c'est sioux c't'histoire.

(surtout si on pousse les imbrications)

--
sm

Le 31/10/2007 00:46, SAM a écrit :

Voir http://www.miakinen.net/tmp/first-child/

(...)

/*
Ceci impactera t1, t4, t7 et t9
mais pas t2, t3, t5, t6, t8 ni t10
*/

Oui je vois bien ça.

Ha Ha ! ce n'est donc plus :
/*
Ceci impactera t2, t4, t7 et t9
mais pas t1, t3, t5, t6, t8 ni t10
*/
:-)

Tu noteras que j'ai changé le code HTML, de façon à varier les plaisirs.
Si tu reprends le code HTML d'origine sans rien changer au CSS, alors
c'est bien t2 qui sera bordé de rouge et non pas t1.

Il me semble que l'échange t2<->t1 fait une groosse différence dans
l'interprétation du phénomène.

Cf. ci-dessus. Reprends le code HTML d'origine et tu verras.

M'enfin je reste dans mon idée : c'est sioux c't'histoire.

(surtout si on pousse les imbrications)

Le 31/10/2007 00:33, SAM a écrit :

Je me demande si on n'est pas d'accord finalement.

Il y a juste que j'exclus les tables principales du div conteneur pour
n'attaquer *que* les tables *imbriquées*, voir :
http://cjoint.com/?kFaDATDr1j

Mais justement Zouplaz voulait attaquer la table principale uniquement,
en excluant la table imbriquée.

Quoi qu'il en soit, mon exemple a marché du premier coup comme je le
pensais, ce qui me confirme bien que je serai capable de faire ce que
veut Zouplaz à condition qu'il nous laisse voir sa structure HTML.